Preview loads on approachPreview loads on approach
Exact source · radio-list-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useState} from 'react';
import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
export default function RadioListShowcase() {
const [value, setValue] = useState('');
return (
<RadioList
label="Notification preference"
value={value}
onChange={setValue}>
<RadioListItem label="Email" value="email" />
<RadioListItem label="SMS" value="sms" />
<RadioListItem label="Push notification" value="push" />
</RadioList>
);
}
Usage
A group of options where only one can be selected at a time. All options are visible at once, making it easy to compare choices. Use it when users need to pick one option from a small set.
Keep the number of options small: typically 2 to 7 choices.
Use clear, concise labels that differentiate each option at a glance.
Pre-select a default option when there's a sensible default; don't leave the group empty unless the choice is optional.
Use when multiple selections are needed; use CheckboxList instead.
Use for long lists; use Selector for better discoverability.
Use horizontal layout with more than 4 options; it wraps awkwardly.
Wrap a disabled RadioList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.
Typed props
Prop
Type and behavior
label
string · required
Label text for the radio group (always rendered for accessibility).
The HTML name attribute shared by the radio inputs, useful for form submissions. When omitted, a unique internal name still groups the radios.
disabledMessage
string
Explains why the group is disabled. Applies to the whole-group disabled state (isDisabled), not per item. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the radios focusable via aria-disabled (selection stays blocked). Use this instead of wrapping a disabled RadioList in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.
isRequired
boolean · default false
Whether the radio group is required.
isOptional
boolean · default false
Whether the field is optional (mutually exclusive with isRequired).
Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.
Anatomy
Header · optional
Optional heading above the radio list.
Children · required
The radio list items rendered as selectable options.
Label/Value · required
The text label and associated value for each radio item.
Accessibility
Radio circle
Color contrast · 1.4.11 Non-text Contrast · 3:1
The circle edge (unselected) and fill (selected) must have at least 3:1 contrast with the surface behind them. For Hover and Pointer down, measure the final colors after the tint and the pressed overlay are applied.
