Skip to content

Radio Group

Base UI

Square radios for choosing one option when you want them all visible.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/radio-group.json

Also installs @base-ui/react.

Usage

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

<RadioGroup
  label="Keep traces for"
  options={[{ value: "30", label: "30 days" }, { value: "90", label: "90 days" }]}
  value={retention}
  onValueChange={setRetention}
/>

Props

  • label * RequiredstringDefault —Names the group for screen readers.
  • options * RequiredRadioOption[]Default —
  • valuestringDefault —The selected option, when you control it.
  • defaultValuestringDefault —The starting option, when it manages itself.
  • onValueChange(value: string) => voidDefault —
  • classNamestringDefault —

Keyboard

↑ ↓Move to the next option and choose it

Reduced motion

Nothing here animates.