Default
Use a clear label and an appropriate input type.
Validation states
Use variants to reflect validation state with accompanying messaging in your form.
Browse components
Input
Labeled form input with visual variants for validation states. Use it for structured data entry in forms and settings.
atoms 4 variants
Variants / states: defaultsuccesswarningerror
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| value | string | No | — | Input value |
| type | string | No | text | Input type |
| label | string | No | — | Input label |
| placeholder | string | No | — | Input placeholder |
| variant | string | No | default | Input variant |