Input
A text-like form field for any input.
Basic
Add .input to any <input>. Pair with a <label> tied via for/id. The same shape extends to Select and Textarea so they line up in a form row.
Sizes
Three sizes match the button scale. Add .input--sm or .input--lg.
Input types
The class applies to every text-like input: text, email, password, number, search, tel, url, date, time.
Helper text
Use .field__description below the input for short hints. Wire it to the input with aria-describedby so screen readers announce it.
Browser validation
Pair native constraint attributes (required, type="email", pattern) with the :user-invalid pseudo. The browser fires it after the user interacts, and clears it the moment the value satisfies the constraints.
Server validation
Set aria-invalid="true" from your form library. The attribute is sticky; Stisla just paints while it's present. Pair with a .field__error tied via aria-describedby.
Disabled and readonly
disabled blocks interaction and dims the field. readonly keeps the value selectable for copy but rejects edits; the bg shifts a tier to signal it.
Plain text
Swap .input for .input--seamless to render a readonly value as bare text: no border, no background, but still aligned with neighboring inputs. Pair with readonly.
Color picker
Add .input to any <input type="color">. The type selector handles the shape, no modifier needed: the field collapses to a swatch and the native chip wears the field's inner radius.
File input
The same class styles type="file". The selector button sits as a small inset chip inside the field and the filename trails after it.
Customization
These variables retune .input without touching component CSS. Override on the field, a parent scope, or :root. The same surface appears on .select and .textarea under their own prefix, so each field component tunes independently.
On touch devices (@media (pointer: coarse)) --input-font-size is bumped to 1rem so iOS Safari doesn't zoom on focus.
| Variable | Use |
|---|---|
--input-radius | Corner radius; the sm and lg variants reassign this |
--input-height | Single-line height; the sm and lg variants reassign this |
--input-padding-inline | Horizontal padding; the sm and lg variants reassign this |
--input-padding-block | Vertical padding; defaults to 0 since the fixed height owns the rhythm |
--input-font-size | Text size; the sm and lg variants reassign this |
--input-bg | Background; readonly shifts a tier |
--input-color | Text color |
--input-border-width | Border thickness |
--input-border-color | Border color; validation hooks flip this to the danger token |
--input-placeholder | Placeholder text color |