Form Components
Field
Field wires a control to its label, help text and error message. It owns the id, points the label at the control, and links both messages with aria-describedby.
Basic usage
Field wires a control to its label, help text and error message. It generates one id, points the label at the control with htmlFor, and links the description and error with aria-describedby. Pass any control as the child.
We will never share it.
<Field label="Email" description="We will never share it."> <Input type="email" placeholder="you@company.com"/></Field>Label on its own associates text with a control, but nothing links help text or an error message to it. That is what Field adds: without it, a screen reader announces that a control is invalid and never says why.
Error state
Passing error renders the message and marks the control invalid, so the danger cue and the message can never disagree. You do not set invalid yourself.
This name is already taken.
At least 12 characters.
Too short.
<Col> <Field label="Display name" error="This name is already taken."> <Input defaultValue="alex.rivera"/> </Field>
<Field label="Password" description="At least 12 characters." error="Too short." > <Input type="password" defaultValue="short"/> </Field></Col>When both description and error are present, the control is described by both, in that order.
An invalid control gets a danger border and ring plus aria-invalid="true", and on Input a trailing alert icon, so the state is never signalled by colour alone.
Any control
Every form control reads the Field it sits in: Input, Textarea, Select, Checkbox, Radio and Switch.
Sets your default currency.
Markdown is supported.
<Col> <Field label="Region" description="Sets your default currency."> <Select> <option>Cyprus</option> <option>Estonia</option> <option>Portugal</option> </Select> </Field>
<Field label="Release notes" description="Markdown is supported."> <Textarea placeholder="What changed?"/> </Field></Col>Radio groups
A radiogroup is not a labelable element, so Field labels it by reference with aria-labelledby instead of htmlFor, and leaves the individual radios alone.
Change it any time.
<Field label="Billing period" description="Change it any time."> <RadioGroup name="billing" defaultValue="yearly"> <Label row itemsCenter><Radio value="monthly"/> Monthly</Label> <Label row itemsCenter><Radio value="yearly"/> Yearly</Label> </RadioGroup></Field>Sizes
Field's size becomes the control's default, so you set it once. An explicit size on the control still wins.
<Col> <Field xs label="Extra small"> <Input placeholder="xs"/> </Field> <Field sm label="Small"> <Input placeholder="sm"/> </Field> <Field label="Medium (default)"> <Input placeholder="md"/> </Field> <Field lg label="Large"> <Input placeholder="lg"/> </Field> <Field xl label="Extra large"> <Input placeholder="xl"/> </Field></Col>Bringing your own id
If the control already carries an id, Field adopts it rather than generating one, so the label still points at the right element. Useful with form libraries that own the id.
Case sensitive.
<Field label="Coupon code" description="Case sensitive."> <Input id="coupon" defaultValue="LAUNCH25"/></Field>Field Props
| Prop | Category | Default | Description |
|---|---|---|---|
accent | Appearance | Accent color appearance (rose) | |
danger | Appearance | Danger color appearance (red) | |
info | Appearance | Info color appearance (cyan) | |
inheritAppearance | Appearance | Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables | |
primary | Appearance | Primary color appearance (gray) | |
secondary | Appearance | Secondary color appearance (gray) | |
success | Appearance | Success color appearance (green) | |
tertiary | Appearance | Tertiary color appearance | |
warning | Appearance | Warning color appearance (amber) | |
desktopStack | Breakpoint | Stack into a column at desktop width and below (max-desktop: 80rem) | |
mobileStack | Breakpoint | Stack into a column at mobile width and below (max-mobile: 48rem) | |
tabletStack | Breakpoint | Stack into a column at tablet width and below (max-tablet: 64rem) | |
flex1 | Flex | Take up remaining space (= | |
flexAuto | Flex | Grow but respect intrinsic size (= | |
flexNone | Flex | Don't grow and don't shrink (= | |
margin | Margin | Enable margin on all sides | |
marginB | Margin | Enable only bottom margin | |
marginT | Margin | Enable only top margin | |
marginX | Margin | Enable only horizontal (inline) margin | |
marginY | Margin | Enable only vertical (block) margin | |
noMargin | Margin | Disable margin (reset to 0) | |
noPadding | Padding | ✓ | Disable internal padding |
padding | Padding | Enable internal padding | |
paddingX | Padding | Enable only horizontal padding | |
paddingY | Padding | Enable only vertical padding | |
pill | Shape | Fully rounded corners (circular) | |
rounded | Shape | Medium rounded corners (default) | |
sharp | Shape | ✓ | No rounded corners (square) |
noShrink | Shrink | Prevent the flex item from shrinking below its content size (= | |
lg | Size | Large size | |
md | Size | ✓ | Medium size (default) |
sm | Size | Small size | |
xl | Size | Extra large size | |
xs | Size | Extra small size | |
textCenter | Text Align | Align text to center | |
textEnd | Text Align | Align text to the reading-direction end (right in LTR, left in RTL) | |
textJustify | Text Align | Justify text | |
textLeft | Text Align | Align text to left (physical side, does not flip under RTL) | |
textRight | Text Align | Align text to right (physical side, does not flip under RTL) | |
textStart | Text Align | Align text to the reading-direction start (left in LTR, right in RTL) | |
filled | Variant | Filled variant - solid background with contrasting text color | |
ghost | Variant | Ghost variant - transparent background, no border, appearance-colored text, tinted hover background | |
outline | Variant | ✓ | Outline variant - transparent background with border and colored text (default) |
Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props
| Prop | Category | Default | Description |
|---|---|---|---|
border | Border | Enable border on all sides | |
borderB | Border | Enable border on bottom | |
borderEnd | Border | Enable border on the inline-end side (right in LTR, left in RTL) | |
borderL | Border | Enable border on left | |
borderR | Border | Enable border on right | |
borderStart | Border | Enable border on the inline-start side (left in LTR, right in RTL) | |
borderT | Border | Enable border on top | |
borderX | Border | Enable border on left and right | |
borderY | Border | Enable border on top and bottom | |
noBorder | Border | ✓ | Disable all borders |
block | Display | Block display - takes full width, new line | |
contents | Display | Contents display - element's box is removed, children display as if parent didn't exist | |
flex | Display | ✓ | Flex display - flexbox container |
grid | Display | Grid display - CSS grid container | |
hidden | Display | Hidden display - element is not visible | |
inline | Display | Inline display - flows with text | |
inlineBlock | Display | Inline-block display - inline but with block properties | |
inlineFlex | Display | Inline-flex display - inline flexbox container | |
inlineGrid | Display | Inline-grid display - inline grid container | |
table | Display | Table display - behaves like table element | |
tableCell | Display | Table-cell display - behaves like td element | |
column | Flex Direction | ✓ | Flex direction column (vertical) |
columnReverse | Flex Direction | Flex direction column-reverse | |
row | Flex Direction | Flex direction row (horizontal) | |
rowReverse | Flex Direction | Flex direction row-reverse | |
gap | Gap | ✓ | Enable gap spacing between children |
noGap | Gap | Disable gap spacing | |
hAuto | Height | Set height to auto | |
hFit | Height | Set height to fit-content | |
hFull | Height | Set height to 100% | |
hScreen | Height | Set height to 100vh (viewport height), removes max-height constraint | |
desktopHide | Hide | Hide element on desktop devices and below (max-desktop: 80rem) | |
mobileHide | Hide | Hide element on mobile devices and below (max-mobile: 48rem) | |
tabletHide | Hide | Hide element on tablet devices and below (max-tablet: 64rem) | |
itemsBaseline | Items | Align items to baseline | |
itemsCenter | Items | Align items to center | |
itemsEnd | Items | Align items to end (bottom/right) | |
itemsStart | Items | ✓ | Align items to start (top/left) |
itemsStretch | Items | Stretch items to fill container | |
justifyAround | Justify | Distribute items with space around them | |
justifyBaseline | Justify | Align items along their baseline on main axis | |
justifyBetween | Justify | Distribute items with space between them | |
justifyCenter | Justify | Center items along the main axis | |
justifyEnd | Justify | Pack items toward the end of the main axis | |
justifyEvenly | Justify | Distribute items with equal space around them | |
justifyStart | Justify | Pack items toward the start of the main axis | |
justifyStretch | Justify | Stretch items to fill the main axis | |
overflowAuto | Overflow | Auto overflow - show scrollbars if needed | |
overflowClip | Overflow | Clip overflow - hard clip without scrollbars | |
overflowHidden | Overflow | Hidden overflow - clip content without scrollbars | |
overflowScroll | Overflow | Scroll overflow - always show scrollbars | |
overflowVisible | Overflow | Visible overflow - content extends beyond bounds | |
overflowXAuto | Overflow | Auto overflow on X-axis only | |
overflowXClip | Overflow | Clip overflow on X-axis only | |
overflowXHidden | Overflow | Hidden overflow on X-axis only | |
overflowXScroll | Overflow | Scroll overflow on X-axis only | |
overflowXVisible | Overflow | Visible overflow on X-axis only | |
overflowYAuto | Overflow | Auto overflow on Y-axis only | |
overflowYClip | Overflow | Clip overflow on Y-axis only | |
overflowYHidden | Overflow | Hidden overflow on Y-axis only | |
overflowYScroll | Overflow | Scroll overflow on Y-axis only | |
overflowYVisible | Overflow | Visible overflow on Y-axis only | |
absolute | Position | Absolute positioning | |
fixed | Position | Fixed positioning | |
relative | Position | Relative positioning | |
static | Position | Static positioning | |
sticky | Position | Sticky positioning | |
responsiveSizing | Responsive Sizing | Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap | |
insetRing | Ring | Enable the inset ring — emits ring-inset | |
noInsetRing | Ring | ✓ | Disable the inset ring |
noShadow | Shadow | Disable drop shadow | |
shadow | Shadow | Enable drop shadow | |
transparent | Transparent | Disable background color - makes component background transparent | |
wAuto | Width | Set width to auto | |
wFit | Width | Set width to fit-content | |
wFull | Width | ✓ | Set width to 100% |
wScreen | Width | Set width to 100vw (viewport width), removes max-width constraint | |
flexNoWrap | Wrap | Force flex items to stay on single line (may overflow) | |
flexWrap | Wrap | Allow flex items to wrap to new lines when container is too narrow | |
flexWrapReverse | Wrap | Wrap flex items in reverse order (last items wrap first) |