- Field layout · Label, Form
The label, control, help text and error stack every input shares. Labels sit above the control in Archivo 600; help and errors sit below in 11.5px. - Input · Input
Single-line text, number, search and code inputs. 40px on desktop, 44px and 16px text on the phone so iOS never zooms. - Textarea with counter · Textarea
Multi-line text (product descriptions, notes, support replies) with a live character counter that turns amber near the limit and red over it. - Select · Select
Pick one value from a short list (under ~10). The trigger looks like a field; the list drops 4px on the menu surface. Statuses show their dot. - Combobox · Command, Popover
A searchable picker for long lists: brands, staff, products, cloth collections. Typing filters and highlights the match; results group under small headings. - Cloth picker · Dialog, Command, Table
The large picker for choosing a cloth from the library: search, supplier and collection filters, an in-stock switch, a table of cloths and a detail side panel with the swatch. - Checkbox · Checkbox
One bare `<input type=checkbox class="cb">`: 18px, navy when checked, with an indeterminate dash for a partly selected table header. - Radio group · RadioGroup
Choose one of two to five visible options. The same `.cb` input on a circle; radio cards for options that need a description. - Switch · Switch
An instant on/off setting that saves without a Save button (Combos offered, Show on the storefront). 36×20 on desktop, 44×26 on the phone. Kit v2 flips `aria-checked` for you unless a confirm opens. - Segmented control · ToggleGroup
Two to five mutually exclusive views or modes in one pill row: Gallery / Table, date ranges on a chart, density. A control, not navigation (that is Tabs). - Date and date range · Calendar, Popover
A field that opens a calendar. Ranges add presets on the left (Today, Last 7 days, This month) and two months side by side. - Money input · composed
An amount with its currency: a currency menu on the left, the symbol, then a right-aligned tabular amount. GBP is the base; EUR and USD are shown beside it. An unverified rate shows amber. - Multi-currency price group · composed
The price lines for one product: GBP base plus EUR and USD, each with a source (manual or converted), an override and a remove action. - Tag input · composed
Free tags and keywords (search terms, collections): chips inside a growing field, Enter or comma to add, × to remove. - File and photo uploader · composed
A drop zone plus a numbered photo strip you can reorder by drag (or keyboard). Each slot shows whether its alt text is written. Files show progress, done and failed rows. - Form section · Separator
How a long form is laid out: a 240px left column with the section title and one line of context, the fields in a two-column grid on the right. One column on the phone. - Sticky save bar · composed
Keeps Save in view on a whole-page form: saved / unsaved changes / error on the left, Discard and Save on the right. A card on desktop, a glass bar above the tab bar on the phone. Kit v2 marks it dirty for you.