Form Components
Radio
Radio selects exactly one option from a set. RadioGroup shares a name across its options and exposes them as a single labelled group.
Basic usage
Radio selects exactly one option from a set. Wrap the options in a RadioGroup so they share a name and behave as one control.
<RadioGroup name="plan" defaultValue="pro"> <Label row itemsCenter><Radio value="free"/> Free</Label> <Label row itemsCenter><Radio value="pro"/> Pro</Label> <Label row itemsCenter><Radio value="team"/> Team</Label></RadioGroup>RadioGroup renders role="radiogroup" and generates a shared name when you do not pass one, so radios are mutually exclusive without extra wiring.
With a group label
Inside a Field, the group is labelled by reference with aria-labelledby, because a radiogroup cannot be the target of htmlFor.
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, two months free</Label> </RadioGroup></Field>Sizes
<Col> <Label row itemsCenter xs><Radio name="s-xs" defaultChecked/> Extra small</Label> <Label row itemsCenter sm><Radio name="s-sm" defaultChecked/> Small</Label> <Label row itemsCenter md><Radio name="s-md" defaultChecked/> Medium</Label> <Label row itemsCenter lg><Radio name="s-lg" defaultChecked/> Large</Label> <Label row itemsCenter xl><Radio name="s-xl" defaultChecked/> Extra large</Label></Col>Appearances
Radio takes the same appearance props as Checkbox: the appearance colours the box border, the selected fill and the focus ring. Set it on the Label too when you want the text to match.
<Row flexWrap> <Label row itemsCenter><Radio name="a-primary" defaultChecked/> primary (default)</Label> <Label row itemsCenter accent><Radio accent name="a-accent" defaultChecked/> accent</Label> <Label row itemsCenter secondary><Radio secondary name="a-secondary" defaultChecked/> secondary</Label> <Label row itemsCenter tertiary><Radio tertiary name="a-tertiary" defaultChecked/> tertiary</Label> <Label row itemsCenter success><Radio success name="a-success" defaultChecked/> success</Label> <Label row itemsCenter danger><Radio danger name="a-danger" defaultChecked/> danger</Label> <Label row itemsCenter warning><Radio warning name="a-warning" defaultChecked/> warning</Label> <Label row itemsCenter info><Radio info name="a-info" defaultChecked/> info</Label></Row>States
<RadioGroup name="states" defaultValue="on"> <Label row itemsCenter><Radio value="off"/> Unselected</Label> <Label row itemsCenter><Radio value="on"/> Selected</Label> <Label row itemsCenter><Radio value="no" disabled/> Disabled</Label></RadioGroup>Radio 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) | |
disabled | Disabled | Disable the component — reduces opacity, changes cursor to not-allowed, and prevents interaction | |
pill | Shape | ✓ | Fully rounded corners (circular) |
rounded | Shape | Medium rounded corners (default) | |
sharp | Shape | No rounded corners (square) | |
lg | Size | Large size | |
md | Size | ✓ | Medium size (default) |
sm | Size | Small size | |
xl | Size | Extra large size | |
xs | Size | Extra small size | |
invalid | Validity | Mark the field invalid (red border/ring), layered over any appearance | |
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 |
|---|---|---|---|
alignSelfAuto | Align Self | Use the parent's align-items value (align-self: auto) | |
alignSelfBaseline | Align Self | Align this item to its baseline (align-self: baseline) | |
alignSelfCenter | Align Self | Center this item on the cross axis (align-self: center) | |
alignSelfEnd | Align Self | Align this item to the end of the cross axis (align-self: flex-end) | |
alignSelfStart | Align Self | Align this item to the start of the cross axis (align-self: flex-start) | |
alignSelfStretch | Align Self | Stretch this item to fill the cross axis (align-self: stretch) | |
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 | |
cursorDefault | Cursor | Default cursor - standard arrow | |
cursorMove | Cursor | Move cursor - indicates draggable element | |
cursorNone | Cursor | No cursor - hides the cursor | |
cursorNotAllowed | Cursor | Not-allowed cursor - indicates disabled state | |
cursorPointer | Cursor | ✓ | Pointer cursor - indicates clickable element |
cursorText | Cursor | Text cursor - indicates selectable text | |
cursorWait | Cursor | Wait cursor - indicates loading/processing | |
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 | |
focusVisible | Focus Visible | ✓ | Enable focus-visible outline |
noFocusVisible | Focus Visible | Disable focus-visible outline | |
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 | |
noTransition | Transition | Disable transitions for instant state changes | |
transition | Transition | Enable smooth transitions between states | |
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 |