表单与选择@neumorphism-ui/radio-group

Radio Group

通过 React context 共享 name 和选中状态，同时每个项目都渲染为真实的 input[type=radio]。支持受控与非受控值、横向和纵向排列、disabled 及 required。

@neumorphism-ui/radio-group

Registry JSON

预览

紧凑在同一屏幕显示更多信息。舒适使用默认间距和柔和层次。宽松为触控界面提供更充足的间距。

安装

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

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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="显示密度"
>
  <Label className="flex gap-2" htmlFor="density-compact">
    <RadioGroupItem id="density-compact" value="compact" />
    紧凑
  </Label>
  <Label className="flex gap-2" htmlFor="density-comfortable">
    <RadioGroupItem id="density-comfortable" value="comfortable" />
    舒适
  </Label>
</RadioGroup>

API 参考

组件	属性	类型	默认值	说明
`RadioGroup`	`value / defaultValue`	`string`	`—`	受控的选中值或非受控初始值。
`RadioGroup`	`onValueChange`	`(value: string) => void`	`—`	选中值变化时调用。
`RadioGroup`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	设置排列方向和 aria-orientation。
`RadioGroup`	`name`	`string`	`generated id`	各项目共享的原生 radio name。
`RadioGroup`	`disabled / required`	`boolean`	`false`	设置所有项目的输入限制。
`RadioGroupItem`	`value`必填	`string`	`—`	项目被选中时传给组合的值。

预览

安装

用法

Import

Example

API 参考

无障碍