ts
| Guidance | Practices |
|---|---|
| Do | Keep the number of options small — typically 2 to 7 choices. |
| Do | Use clear, concise labels that differentiate each option at a glance. |
| Do | Pre-select a default option when there's a sensible default — don't leave the group empty unless the choice is truly optional. |
| Don't | Use when multiple selections are needed — use CheckboxList instead. |
| Don't | Use for long lists — use Selector for better discoverability. |
| Don't | Use horizontal layout with more than 4 options — it wraps awkwardly. |
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Label text for the radio group (always rendered for accessibility). |
valuerequired | string | The currently selected value. |
onChangerequired | (value: string) => void | Callback fired when the selected value changes. |
childrenrequired | ReactNode | XDSRadioListItem elements. |
isLabelHidden | boolean (default: false) | Whether to visually hide the label. |
description | string | Description text displayed below the label. |
orientation | 'vertical' | 'horizontal' (default: 'vertical') | Layout direction of the radio items. |
isDisabled | boolean (default: false) | Whether all radio items are disabled. |
isRequired | boolean (default: false) | Whether the radio group is required. |
isOptional | boolean (default: false) | Whether the field is optional (mutually exclusive with isRequired). |
status | XDSInputStatus | Status indicator ({ type, message }). |
size | 'sm' | 'md' (default: 'md') | Size of the radio controls. |
labelTooltip | string | Tooltip text for an info icon next to the label. |
xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}. |
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Label text for the radio item. |
valuerequired | string | Value of this radio item. |
description | string | Description text displayed below the label. |
isDisabled | boolean (default: false) | Whether this individual radio item is disabled. |
startContent | ReactNode | Content to render before the radio circle. |
endContent | ReactNode | Content to render after the label. |