Text inputs enable users to enter free-form text data for both for long and short-form entries.
Color
| Element | Property | Color token |
|---|
| Label | text color | $text-secondary |
| Field text | text color | $text-primary |
| Placeholder text | text color | $text-placeholder |
| Helper text | text color | $text-helper |
| Field | background-color | $field-02 |
| | border | $border-subtle-01 |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Label | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Field text | 14 / 0.875 | Regular / 400 | $body-compact-02 |
| Helper text | 12 / 0.75 | Regular / 400 | $helper-text-02 |
| Error/warning message | 12 / 0.75 | Regular / 400 | $helper-text-02 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Label | margin-bottom | 4 / 0.25 | $spacing-02 |
| Helper text | margin-top | 4 / 0.25 | $spacing-02 |
| Input text | padding-left, padding-right | 12 / 0.75 | $spacing-04 |
| Field | border | 1px | – |
| Error | border | 2px | $spacing-01 |
