Components
Forms
Every control shares one surface: the same height, radius, border and focus ring. Labels are always visible, hints explain, and errors say how to fix the problem.
FieldInputSelectCheckboxRadioSwitch
Fields
Field wires the label, hint and error to the control with ids, so a screen reader announces all three together. Control borders meet 3:1 against every surface.
The admin URL of the source store.
Use a number between 50 and 250.
Optional
Visible to everyone in this workspace.
Inputs and selects
Inputs take a leading icon or a trailing unit. Selects are native, so they work with every keyboard, screen reader and mobile picker, styled to match.
pts/s
Shopify cost points per second.
Read only. Generated when the tenant was created.
Checkboxes, radios and switches
Checkboxes collect independent options, radios pick one of a set, and switches apply a setting the moment they change. Their boundaries use the input token so they read at 3:1.
Applies to the next dispatch.
Locked by the workspace owner.
Validation
Validate on submit, show every problem at once, move focus to the first invalid field and keep what the person typed. Messages say what to do, not what went wrong.
API
Field uses a render function so the control receives its id, describedby and invalid state.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | – | Visible label, always rendered. |
| hint | string | – | Helper text. Hidden while an error shows. |
| error | string | – | Sets aria-invalid on the control and announces politely. |
| required | boolean | false | Adds the required attribute and a visual marker. |
| optional | boolean | false | Shows an Optional tag when most fields are required. |
| children | (control) => ReactNode | – | Spread control onto Input, Select or Textarea. |
Do
Keep labels visible above the control
The label stays put while typing, so the person never loses track of what the field wants.
Don't
Use the placeholder as the label
The hint disappears on the first keystroke and placeholder text is easy to mistake for a filled value.