Structure
The text represents a multi-line plain text, 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.
Anatomy
| Property | Token | px | rem |
|---|---|---|---|
| Border radius | radii-0 | 4 | 0.25 |
| Padding top | space $2 | 8 | 0.5 |
| Padding left | space $3 | 12 | 0.75 |
| Margin | space $3 | 12 | 0.75 |
Typography
Typography refers to the visual presentation and arrangement of text within a textarea component. It involves decisions about font styles, sizes, line spacing, and other text-related properties that ensure readability and a harmonious visual appearance of the text within the input area.
| Element | Family | Weight | Size | Rem | px |
|---|---|---|---|---|---|
| Label font | $body | 600 | $sm | 0.875 | 14 |
| Description font | $body | 400 | $sm | 0.875 | 14 |
| Description font | $body | 400 | $md | 1 | 16 |
Variants & color
Color in a textarea component refers to the visual appearance of the text and background within the input area. It involves selecting appropriate text and background colors to ensure readability, visual contrast, and alignment with the overall design aesthetics of the user interface.
Default
| Property | Token | Hex |
|---|---|---|
| Bg color | $white | #ffffff |
| Border-color | $grey800 | #545454 |
| Label font-color | $grey900 | #333333 |
| Description font-color | $grey700 | #757575 |
| Text font-color | $grey1000 | #1F1F1F |
Placeholder
| Property | Token | Hex |
|---|---|---|
| Bg color | $white | #ffffff |
| Border-color | $grey800 | #545454 |
| Label font-color | $grey900 | #333333 |
| Description font-color | $grey700 | #757575 |
| Placeholder font-color | $grey700 | #757575 |
Focus
| Property | Token | Hex |
|---|---|---|
| Bg color | $white | #ffffff |
| Border-color | $primary800 | #0F67F5 |
| Label font-color | $grey900 | #333333 |
| Text font-color | $grey1000 | #1F1F1F |
Disabled
| Property | Token | Hex |
|---|---|---|
| Bg color | $grey200 | #EEEEEE |
| Border-color | $grey800 | #545454 |
| Label font-color | $grey900 | #333333 |
| Text font-color | $grey1000 | #1F1F1F |
Error
| Property | Token | Hex |
|---|---|---|
| Bg color | $grey200 | #EEEEEE |
| Border-color | $danger | #EE0505 |
| Label font-color | $grey900 | #333333 |
| Text font-color | $danger | #EE0505 |
| Error message font-color | $danger | #EE0505 |