Forms & selection@neumorphism-ui/radio-group

Radio Group

Shares the name and selected state through React context while rendering every item as a real input[type=radio]. Supports controlled and uncontrolled values, horizontal or vertical layout, disabled, and required.

@neumorphism-ui/radio-group

Registry JSON

Preview

CompactShow more information on each screen.ComfortableUse the default spacing and gentle depth.SpaciousProvide generous spacing for touch interfaces.

Installation

npx shadcn@latest add @neumorphism-ui/radio-group

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/radio-group @neumorphism-ui/label

Import

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

Example

<RadioGroup
  defaultValue="comfortable"
  orientation="horizontal"
  aria-label="Display density"
>
  <Label className="flex gap-2" htmlFor="density-compact">
    <RadioGroupItem id="density-compact" value="compact" />
    Compact
  </Label>
  <Label className="flex gap-2" htmlFor="density-comfortable">
    <RadioGroupItem id="density-comfortable" value="comfortable" />
    Comfortable
  </Label>
</RadioGroup>

API Reference

Component	Prop	Type	Default	Description
`RadioGroup`	`value / defaultValue`	`string`	`—`	The controlled selected value or initial uncontrolled value.
`RadioGroup`	`onValueChange`	`(value: string) => void`	`—`	Called when the selected value changes.
`RadioGroup`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Sets the layout direction and aria-orientation.
`RadioGroup`	`name`	`string`	`generated id`	The native radio name shared by all items.
`RadioGroup`	`disabled / required`	`boolean`	`false`	Sets input constraints for all items.
`RadioGroupItem`	`value`required	`string`	`—`	The value passed to the group when the item is selected.