Radio Group

A set of options where only one can be selected. The selected dot pops in with a spring.

springduration

tsx

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

export default function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="spring">
      {["spring", "duration"].map((v) => (
        <label key={v} className="flex items-center gap-2 text-sm capitalize">
          <RadioGroupItem value={v} />
          {v}
        </label>
      ))}
    </RadioGroup>
  )
}

bunx --bun @seamui/cli@latest add radio-group

Notes

Selecting an item mounts its indicator and scales the dot in from 0.
Controlled via value / onValueChange, uncontrolled via defaultValue; arrow keys move the selection between items.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.