Anatomy
- Container
- Input text
Default Values
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | textarea-padding-x-medium | 0.5rem |
| Padding (top and bottom) | textarea-padding-y-medium | 0.5rem |
| Border width | textarea-border-width | 1px |
| Border radius | textarea-radius | 3px |
| Border color | textarea-color-border-default | #2b659b |
| Background color | textarea-color-background-default | #101923 |
| Label | ||
| Font family | font-control-body-1-font-family | ‘Roboto’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Oxygen-Sans, Ubuntu, Cantarell, ‘Helvetica Neue’, sans-serif |
| Font size | font-control-body-1-font-size | 1rem |
| Font weight | font-control-body-1-font-weight | 400 |
| Line height | font-control-body-1-line-height | calc(20 / 16) |
| Letter spacing | font-control-body-1-letter-spacing | 0.005em |
| Text color | textarea-color-text-default | #ffffff |
States
Default
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | textarea-color-border-default | #2b659b |
Hover
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | textarea-color-border-hover | #92cbff |
Invalid
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | textarea-color-border-invalid | #ff3838 |
Disabled
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Opacity | opacity-disabled | 40% |
Focus
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Outline | focus-outline | 1px solid #da9ce7 |
| Outline Offset | focus-offset | 0.125rem |
Sizes
Small
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | textarea-padding-x-small | 0.5rem |
| Padding (top and bottom) | textarea-padding-y-small | 0.25rem |
Medium
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | textarea-padding-x-medium | 0.5rem |
| Padding (top and bottom) | textarea-padding-y-medium | 0.5rem |
Large
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | textarea-padding-x-large | 0.5rem |
| Padding (top and bottom) | textarea-padding-y-large | 0.75rem |
Variants
Placeholder Text
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Text color | textarea-color-text-placeholder | #a4abb6 |