Input
Filled, with a hairline along the bottom so an empty field can be found; the ring comes on focus. Validation appears only after you leave a field.
Examples
States
Edit the email and leave the field: :user-invalid draws the danger ring.Sizes
Server-side error
aria-invalid draws the same ring as :user-invalid, for errors the browser can't detect.
That name is taken. Try another.
Anatomy
input.input | Any text-like <input>, a <textarea>, or the <select> inside .select. Fills the inline size of its container. |
API
| Attribute | Values | Description |
|---|---|---|
data-size | sl | Smaller or larger padding and type, matching the button sizes. Default sits between. |
required | boolean | With required or any other constraint (type=email, pattern, min), an invalid value draws an inset danger ring once the user has edited or left the control (:user-invalid). |
disabled | boolean | Halves the opacity. |
aria-invalid | true | Draws the danger ring, and inside a .field reveals the [data-error] message. Use it for errors the browser cannot detect, such as a name already taken. |
placeholder | <text> | Muted hint text inside the empty control. |
Accessibility
- Every input needs a label: a
<label for>(see Field) or, where there is no visible label, anaria-label. - The danger ring is colour only. Pair it with an error message in the field so the problem is stated in words.
- In forced-colours mode the fill disappears, so the input gets a 1px system-colour border to keep its shape.
| Key | Effect |
|---|---|
| Tab | Moves focus in; the accent ring appears on keyboard focus only (:focus-visible). |