Text input
Usage
A labelled text field with hint, error and required states built in. The reference has zero `required` attributes and no validation anywhere across its 208 pages, so there was no variant matrix to work from — these states are designed from first principles. They are also most of the real work in any customer build, which is why they live in the control rather than being reinvented per page.import { Textinput } from '@summonware/ui';Best practices
DoAlways pass `label`. A placeholder is not a label — it disappears exactly when the user needs it.
DoUse `hint` for standing guidance and `error` only after a failed validation. Error replaces hint rather than stacking; two messages at once is noise.
DoSet `type` and `inputMode` correctly — it changes the mobile keyboard and enables browser autofill.
Don'tMark a field required with an asterisk alone. The asterisk is `aria-hidden`; the `required` prop is what assistive tech reads.
Anatomy
LabelBound to the input by a generated id, so clicking it focuses the field.
Control *The input. Height follows `--sw-control-h`, so it retunes with brand density.
Hint / ErrorOne line below. The error carries `role="alert"` and sets `aria-invalid` on the control.
Examples
Common configurations, variations and states.States
We never share this.
Postcode is required
The four states a field moves through. Note the error field shows no hint — the two never appear together.
Input types
Setting `type` and `inputMode` correctly is what gets a numeric keypad on mobile and working autofill on desktop.
Reference variants
4 of 18 labels from the reference are demonstrated above.Basic InputsForm Control StateHTML Input TypesInput AttributesSizingAdvance Input attributesForm controlsPickerDataListInline FormForm GridHorizontal FormValidation FormSupported ElementsTooltipsChecks and RadiosInput GroupCustom Forms