Components
Input
Input is a form element used to collect user data. It offers basic functionality and is ideal when you need full control over the component's layout and validation, making it suitable for building custom elements.
React
const Preview = () => { return <Input aria-label='input' />; }; render(<Preview />)
- type
- Description
Supported `input` types
- Type
"number" | "hidden" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "search" | "tel" | "text" | "time" | "url" | "week"- Default
text
- size
- Description
Defines the width of `Input` in count of characters.
- Type
number
- disabled
- Description
Disables element @note Avoid using if possible for accessibility purposes
- Type
boolean
- readOnly
- Description
Toggle `readOnly`
- Type
boolean
- role
- Description
Set role, i.e. `switch` when `checkbox` or `radio`
- Type
AriaRole
| Name | Type | Default | Description |
|---|---|---|---|
| type | "number" | "hidden" | "color" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "search" | "tel" | "text" | "time" | "url" | "week" | text | Supported `input` types |
| size | number | - | Defines the width of `Input` in count of characters. |
| disabled | boolean | - | Disables element @note Avoid using if possible for accessibility purposes |
| readOnly | boolean | - | Toggle `readOnly` |
| role | AriaRole | - | Set role, i.e. `switch` when `checkbox` or `radio` |
Usage
Input is a styled native <input> element, so the documentation is sparse.
You can use this component to style most type attributes of <input>.
You can read about The HTML Input element on MDN (mozilla.com).
Examples
With label
React
const WithLabelEn = () => { return ( <Field> <Label>Social Security Number</Label> <Input /> </Field> ); }; render(<WithLabelEn />)
With error
React
const WithErrorEn = () => { return ( <Field> <Label>Social Security Number</Label> <Input aria-invalid /> </Field> ); }; render(<WithErrorEn />)
Disabled
React
const DisabledEn = () => { return ( <Field> <Label>Social Security Number</Label> <Input disabled value='12345678901' /> </Field> ); }; render(<DisabledEn />)
ReadOnly
React
const ReadOnlyEn = () => { return ( <Field> <Label>Social Security Number</Label> <Input readOnly value='12345678901' /> </Field> ); }; render(<ReadOnlyEn />)
HTML
Append the class name to the <input> element to get the design from the design system.
CSS variables and data attributes
The ds-input class can be used to style Select and Textarea as well.
| Name | Value |
|---|---|
| --dsc-input-padding | var(--ds-size-2) var(--ds-size-3) |
| --dsc-input-size--toggle | var(--ds-size-6) |
| --dsc-input-size | var(--ds-size-12) |
| --dsc-input-background--readonly | var(--ds-color-neutral-surface-tinted) |
| --dsc-input-background | var(--ds-color-neutral-surface-default) |
| --dsc-input-border-color--readonly | var(--ds-color-neutral-border-subtle) |
| --dsc-input-border-color | var(--ds-color-neutral-border-default) |
| --dsc-input-border-style | solid |
| --dsc-input-border-width--toggle | max(var(--ds-border-width-default),calc(var(--ds-size-1)/2)) |
| --dsc-input-border-width | var(--ds-border-width-default) |
| --dsc-input-outline-color--hover | var(--ds-color-neutral-border-default) |
| --dsc-input-outline-color--toggle--hover | var(--dsc-input-accent-color) |
| --dsc-input-outline-width--hover | var(--ds-border-width-default) |
| --dsc-input-outline-style--hover | solid |
| --dsc-input-color--readonly | var(--ds-color-neutral-text-default) |
| --dsc-input-color | var(--ds-color-neutral-text-default) |
| --dsc-input-stroke-color | var(--ds-color-base-contrast-default) |
| --dsc-input-stroke-color--invalid | var(--ds-color-danger-base-contrast-default) |
| --dsc-input-stroke-width | 0.05em |
| --dsc-input-accent-color | var(--ds-color-base-default) |
| --dsc-input-accent-color--invalid | var(--ds-color-danger-text-subtle) |
| Name | Value |
|---|---|
| data-width | auto |