Input
A bare text input; compose inside a Field for the label and a11y wiring.
Usage
A bare text input. Compose it inside a Field for the label and a11y wiring. For every combination and state side by side, see the Field Matrix.
Invalid input
Set data-invalid to field and aria-invalid to input: the border and text switch to the error palette and stay
red while focused.
Disabled input
Set data-disabled on the Field and disabled on the input: the label dims
and the input is grayed out and non-interactive.
API Reference
Input
All native <input> props, plus:
| Prop | Type | Default |
|---|---|---|
variant | "soft" | "surface" | "outlined" | "ghost" | "none" | follows the enclosing Field, else the data-input-style knob (soft) |
variant="none" renders chrome-less, used inside InputGroup (which carries
the box) and inside labelPosition="inset" fields (where the Field shell
carries the box).
Field state attributes
Set on Field; the composition reacts as a whole.
| Attribute | Pair with | Effect |
|---|---|---|
data-invalid | aria-invalid on the input | label + text turn error red; filled inset shells tint error-soft |
data-disabled | disabled on the input | control text dims, filled inset shells tint gray-soft; the label keeps full contrast |