Forms
Form components collect input using native controls composed with shared field chrome and validation relationships.
What this category contains
Skrewww forms separate field wrappers from controls. FormField owns label, description, required indication, and validation placement. Individual controls own native input semantics. ValidationMessage renders typed inline feedback linked with aria-describedby.
Status
All implemented form controls are Beta. Select is non-searchable. Combobox is searchable. Search Field is the canonical search-specific component at /components/search-field.
Accessibility considerations
Every control needs a programmatic label. Error state uses aria-invalid and aria-describedby. Native controls preserve platform keyboard, mobile picker, and screen-reader behavior.
Implemented components (17)
- Text Inputstable
Text Input is a single-line text entry for short, free-form data such as names, emails, or search terms.
- Form Fieldstable
Form Field is a shared field wrapper for label, description, required indicator, and validation placement — not a visual input.
- Validation Messagestable
Validation Message is inline typed feedback paired with a field — error, warning, success, or info — with icon and text.
- Checkboxstable
Checkbox is a native checkbox for independent or multi-select choices, including indeterminate group states.
- Radiostable
Radio is a native radio button for a single option inside a mutually exclusive group.
- Radio Groupstable
Radio Group is an accessible grouping layer for mutually exclusive radio options with legend, helper text, and errors.
- Switchstable
Switch is a boolean settings control for immediate on/off changes — not a substitute for Checkbox in forms.
- Textareastable
Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.
- Selectstable
Select is a combobox-style single-select with a Popover listbox trigger and hidden native select for form submission.
- Comboboxbeta
Combobox is an editable searchable single-select with a filterable listbox — distinct from non-searchable Select and query-only Search Field.
- Search Fieldstable
Search Field is a search-specific text field with leading magnifying-glass icon and optional clear action — built on shared text-input control behavior.
- Credit Card Fieldbeta
Credit Card Field is a compound UI control for card number, expiry, and CVC in one shell — visual pattern only, not a payment processor or PCI vault.
- Phone Number Fieldbeta
Phone Number Field pairs a country/dial-code selector with a phone number input — UI pattern only, not SMS verification or carrier lookup.
- Number Inputbeta
Number Input is direct numeric entry with optional steppers and min/max/step — not currency, quantity business logic, or a Slider.
- Date Pickerbeta
Date Picker is a date-only field with editable D MMM YYYY text entry (en-GB) and calendar popover for single-date selection.
- File Uploadbeta
File Upload is a native file input with drag-and-drop dropzone, advisory validation, selected-file list, and multipart form submission — selection only, not network upload.
- Sliderbeta
Slider is a single-value control for selecting a number within min/max by dragging or keyboard-adjusting a thumb along a track.