Anatomy
- Container
- Prefix Slot (optional)
- Label (using “default text”)
- Suffix Slot (optional)
Default Values
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | input-padding-x-medium | 0.5rem |
| Padding (top and bottom) | input-padding-y-medium | 0.5rem |
| Border width | input-border-width | 1px |
| Border radius | input-radius | 3px |
| Border color | input-color-border-default | #2b659b |
| Background color | input-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 | input-color-text-default | #ffffff |
States
Hover
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | input-color-border-hover | #92cbff |
Invalid
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Border color | input-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) | input-padding-x-small | 0.5rem |
| Padding (top and bottom) | input-padding-y-small | 0.25rem |
Medium
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | input-padding-x-medium | 0.5rem |
| Padding (top and bottom) | input-padding-y-medium | 0.25rem |
Large
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (left and right) | input-padding-x-large | 0.5rem |
| Padding (top and bottom) | input-padding-y-large | 0.75rem |
Variants
Placeholder Text
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Text color | input-color-text-placeholder | #a4abb6 |
With Prefix
| Attribute | Token | Value |
|---|---|---|
| Prefix | ||
| Dimension | input-icon-dimension | 20px |
| Margin right | input-prefix-margin-right | 0.25rem |
| Fill color | input-icon-color-fill-default | #4dacff |
With Suffix
| Attribute | Token | Value |
|---|---|---|
| Suffix | ||
| Dimension | input-icon-dimension | 20px |
| Margin left | input-suffix-margin-left | 0.25rem |
| Fill color | input-icon-color-fill-default | #4dacff |