Radio Group

A group of radio buttons for single selection

A radio group component built with Ark UI. Use the convenience API with options and optional label, or the compound API for custom layout.

FrameworkReactVueSvelte

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

const options = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
];

export default function Example() {
  return (
    <RadioGroup
      label="Framework"
      options={options}
      defaultValue="react"
    />
  );
}

View Code

Installation

bash

liminal add radio-group

Usage

Pass options (array of { value, label, disabled? }), optional label, and defaultValue or controlled value and onValueChange.

Option AOption B

<RadioGroup
  options={[
    { value: "a", label: "Option A" },
    { value: "b", label: "Option B" },
  ]}
  defaultValue="a"
/>

View Code

Examples

With label and disabled option

Choose oneYesNoMaybe

<RadioGroup
  label="Choose one"
  options={[
    { value: "yes", label: "Yes" },
    { value: "no", label: "No" },
    { value: "maybe", label: "Maybe", disabled: true },
  ]}
  defaultValue="yes"
/>

View Code

Compound API

Use RadioGroupRoot, RadioGroupLabel, RadioGroupItem, RadioGroupItemText, RadioGroupItemControl, and RadioGroupItemHiddenInput for full control.

tsx

import {
  RadioGroupRoot,
  RadioGroupLabel,
  RadioGroupItem,
  RadioGroupItemText,
  RadioGroupItemControl,
  RadioGroupItemHiddenInput,
} from "@/components/ui/radio-group";

export default function Example() {
  return (
    <RadioGroupRoot defaultValue="react">
      <RadioGroupLabel>Framework</RadioGroupLabel>
      <RadioGroupItem value="react">
        <RadioGroupItemHiddenInput />
        <RadioGroupItemControl />
        <RadioGroupItemText>React</RadioGroupItemText>
      </RadioGroupItem>
      <RadioGroupItem value="vue">
        <RadioGroupItemHiddenInput />
        <RadioGroupItemControl />
        <RadioGroupItemText>Vue</RadioGroupItemText>
      </RadioGroupItem>
    </RadioGroupRoot>
  );
}

API

Prop	Type	Default	Description
options	{ value: string; label: React.ReactNode; disabled?: boolean }[]	-	Radio options (convenience API).
label	React.ReactNode	-	Group label (convenience API).
defaultValue	string	-	Initial selected value.
value	string	-	Controlled selected value.
onValueChange	(details: { value: string }) => void	-	Callback when selection changes.