XDS — Design System

RadioListItem@xds/core · XDSRadioListItem v0.0.13

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.

ts
import {XDSRadioListItem} from '@xds/core/RadioList'

Best practices

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.

Showcase source

tsx
'use client';
import {useState} from 'react';
import {XDSRadioList, XDSRadioListItem} from '@xds/core/RadioList';
export default function RadioListItemShowcase() {
  const [value, setValue] = useState('standard');
  return (
    <XDSRadioList label="Shipping method" value={value} onChange={setValue}>
      <XDSRadioListItem
        label="Standard"
        value="standard"
        description="5–7 business days"
      />
      <XDSRadioListItem
        label="Express"
        value="express"
        description="2–3 business days"
      />
      <XDSRadioListItem
        label="Overnight"
        value="overnight"
        description="Next business day"
      />
      <XDSRadioListItem
        label="Same day"
        value="sameday"
        description="Not available in your area"
        isDisabled
      />
    </XDSRadioList>
  );
}