1

Radio Group

A radio group with roving tabindex and a traveling dot morph — the selection indicator springs from the previous radio to the new one via layoutId animation.

Dependencies

motion

Interaction Type

Click to select. Arrow keys move and select (Up/Down vertical, Left/Right horizontal, RTL-aware). Tab enters/exits the group as a single stop.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

Controlled selected value.

defaultValue
string

Initial value for uncontrolled usage.

onValueChange
(value: string) => void

Called when the selected value changes.

name
string

Form field name applied to hidden radio inputs.

disabled
boolean

Disables all items in the group.

required
boolean

Marks the group as required for form validation.

orientation
'vertical' | 'horizontal'

Layout direction. Determines which arrow keys navigate.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/radio-group.json

How to use

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

export function Demo() {
  const [size, setSize] = useState('medium')
  return (
    <RadioGroup value={size} onValueChange={setSize} name="size">
      <RadioGroupItem value="small">Small</RadioGroupItem>
      <RadioGroupItem value="medium">Medium</RadioGroupItem>
      <RadioGroupItem value="large">Large</RadioGroupItem>
    </RadioGroup>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/radio-group.json