The text area consists of all the same general elements that the standard text field contains. The primary difference between the two is the omission of any icons inside the text field container.




Text areas should be used on forms, dialogs, background, and foreground surfaces and sometimes on tables. Use a text field area when the user input required may wrap to a second line. Text areas should be wide enough to accommodate at least 40 characters. In some exceedingly rare circumstances, they may be used with as few as 20 characters, but this should be a last resort.



modelValuevalue to be placed in the textareaStringfalse-
labeltext label for the textareaStringtrue-
hinthint text to be displayed below the textareaStringfalse-
errorerror text to be displayed below the textareaStringfalse-
clearlabel for the clear link that will appear at the end of the textarea when this has a valueStringfalse""
disabledputs the textarea into a disabled stateBooleanfalsefalse
maxlengthmaximum amount of characters this textarea will acceptNumberfalse0 - no limit
autowhen true the textarea will automatically growBooleanfalsefalse
hideLabelhides the label for the input in scenarios like tables where it would get in the wayBooleanfalse-
schemaa schema for use in validationObjectfalse-


  • update:modelValue - emitted when there is a new value


  • feather-textarea-input - on the textarea element
  • feather-form-element-label - on the label text element
  • feather-form-element-hint - on the hint text element
  • feather-form-element-error - on the error text element
  • feather-form-element-count - on the maxlength text element


Specifying a class or data-ref-id attribute will cause them to be applied to the component's root container div. All other attributes are inherited to the input where it makes sense. Some will be ignored if they conflict with some of the attributes used for accessibility.