Radio group: Disabled and read-only

Disable a single option, or make the whole group readOnly to show a value that can't change.

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupStates() {
  return (
    <div className="flex flex-wrap gap-12 text-sm">
      <RadioGroup aria-label="Theme" defaultValue="system" className="w-fit">
        <label className="flex items-center gap-3">
          <RadioGroupItem value="light" />
          Light
        </label>
        <label className="flex items-center gap-3">
          <RadioGroupItem value="dark" disabled />
          Dark (coming soon)
        </label>
        <label className="flex items-center gap-3">
          <RadioGroupItem value="system" />
          System
        </label>
      </RadioGroup>
      <RadioGroup
        aria-label="Region"
        defaultValue="eu"
        readOnly
        className="w-fit"
      >
        <label className="flex items-center gap-3">
          <RadioGroupItem value="us" />
          United States
        </label>
        <label className="flex items-center gap-3">
          <RadioGroupItem value="eu" />
          Europe (locked)
        </label>
      </RadioGroup>
    </div>
  )
}

Add this example

This adds the example as components/examples/radio-group/states.tsx, together with the Radio group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/radio-group-states.json

To add only the component, follow the Radio group installation.

Props in this example

The Radio group props this example sets, from the API reference.

RadioGroup

Prop	Type	Default
`defaultValue`	`Value`	`–`
`readOnly`	`boolean`	`false`

RadioGroupItem

Prop	Type	Default
`value`	`Value`	`–`
`disabled`	`boolean`	`false`

Every prop is in the Radio group API reference.

More Radio group examples

See them all, with keyboard support and accessibility notes, on the Radio group page.