textarea function

Component textarea(
  1. List<Component> children, {
  2. AutoComplete? autoComplete,
  3. bool? autofocus,
  4. int? cols,
  5. bool? disabled,
  6. int? minLength,
  7. String? name,
  8. String? placeholder,
  9. bool? readonly,
  10. bool? required,
  11. int? rows,
  12. SpellCheck? spellCheck,
  13. TextWrap? wrap,
  14. ValueChanged<String>? onInput,
  15. ValueChanged<String>? onChange,
  16. Key? key,
  17. String? id,
  18. String? classes,
  19. Styles? styles,
  20. Map<String, String>? attributes,
  21. Map<String, EventCallback>? events,
})

The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

  • autoComplete: Indicates whether the value of the control can be automatically completed by the browser.
  • autofocus: This attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in a document can have this attribute specified.
  • cols: The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
  • disabled: Indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example <fieldset>; if there is no containing element when the disabled attribute is set, the control is enabled.
  • minLength: The minimum number of characters (UTF-16 code units) required that the user should enter.
  • name: The name of the control
  • placeholder: A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
  • readonly: Indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form.
  • required: This attribute specifies that the user must fill in a value before submitting a form.
  • rows: The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
  • spellCheck: Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
  • wrap: Indicates how the control wraps text. If this attribute is not specified, soft is its default value.
  • onInput: Callback for the 'input' event.
  • onChange: Callback for the 'change' event.

Implementation

Component textarea(List<Component> children,
    {AutoComplete? autoComplete,
    bool? autofocus,
    int? cols,
    bool? disabled,
    int? minLength,
    String? name,
    String? placeholder,
    bool? readonly,
    bool? required,
    int? rows,
    SpellCheck? spellCheck,
    TextWrap? wrap,
    ValueChanged<String>? onInput,
    ValueChanged<String>? onChange,
    Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'textarea',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
      if (autoComplete != null) 'autocomplete': autoComplete.value,
      if (autofocus == true) 'autofocus': '',
      if (cols != null) 'cols': '$cols',
      if (disabled == true) 'disabled': '',
      if (minLength != null) 'minlength': '$minLength',
      if (name != null) 'name': name,
      if (placeholder != null) 'placeholder': placeholder,
      if (readonly == true) 'readonly': '',
      if (required == true) 'required': '',
      if (rows != null) 'rows': '$rows',
      if (spellCheck != null) 'spellcheck': spellCheck.value,
      if (wrap != null) 'wrap': wrap.value,
    },
    events: {
      ...?events,
      ..._events(onInput: onInput, onChange: onChange),
    },
    children: children,
  );
}