TextArea
Editable multi-line text input field
Basic textarea
Label all fields
Always include a readable label, preferably through a visible, connected
<textarea> element, or alternatively through a hidden aria-label attribute.
Wrap the associated elements together in .bf-textarea-container, for layout
purposes.
Description
Additional information can be added on a .bf-label-description element.
Feedback
You can provide dynamic feedback below the textarea with the
.bf-label-feedback class.
Disabled
Disable the field using .bf-textarea-disabled on the container and
disabled attribute on the textarea element.
Icon
Textareas cannot wrap around other elements, making it tricky to place icons.
Therefore you need a few extra elements and classes to make sure everything
looks correctly:
Alert state
Render a red underline when there's something wrong with the textarea,
using .bf-textarea-alert on the container, preferably along with a feedback
message letting the user know what's wrong.