XDS — Design System

XDSRadioListItem@xds/core · 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.

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.

Anatomy

Element		Description
Header		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.

Import

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

Props

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.

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>
  );
}