Forms
Textarea
A textarea is a multi-line input field that enables users to enter longer blocks of text, such as comments, messages, or descriptions.
Basic example
Default
Basic textarea example.
Label and placeholder
Basic textarea with placeholder.
Types
Default
Floating label
The `textarea-floating` style is used to define the appearance of the textarea, while the `textarea-floating-label` is the container for the label text.
Size
Default
Add responsive class `textarea-{size}` where `{size} = xs|sm|md|lg|xl` for textarea of different sizes.
Floating label
Add responsive class `select-{size}` where `{size} = xs|sm|md|lg|xl` for select of different sizes.
Textarea group
Leading icons
Add a leading icon inside textarea.
Tailing icons
Add a tailing icon inside textarea.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
Hidden label
`label` elements hidden using the .sr-only class.
Disable
Add the `disabled` boolean attribute on an textarea to remove pointer events, and prevent focusing.
Readonly
Add the `readonly` boolean attribute on an textarea to prevent modification of the textarea value.
Helper text
Basic textarea example with helper text and hints.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
textarea | component | Basic textarea field. |
textarea-floating | component | Floating textarea field. |
textarea-floating-label | part | Floats the label to the top. |
label-text | part | For label. |
helper-text | part | For helper text. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
textarea-xs | size | Extra small Textarea size. |
textarea-sm | size | Smaller Textarea size. |
textarea-md | size | Medium(default) Textarea size. |
textarea-lg | size | Larger Textarea size. |
textarea-xl | size | Extra large Textarea size. |