Skip to main content

单选框 Radio

该组件封装自 Radix UI Radio Group，并根据 Lucide 提供的 Circle 图标自定义了单选框的外观。适用于需要用户选择单一选项的场景。

📦 引入方式​

import { RadioGroup, RadioGroupItem } from '@npmqg/react-ui-core';

🧩 使用示例​

📚RadioGroup 容器​

📚 使用 defaultValue 属性设置默认选中的单选框​

defaultValue 属性允许在没有 value 和 onValueChange 的情况下设置初始选中项。

📚 使用 disabled 禁用单选框项​

禁用 RadioGroupItem 会导致其无法被选中，并且显示为禁用样式。

🧩 组件结构​

组件属性类型默认值说明
RadioGroupvaluestring—当前选中的值（受控）
onValueChange(value: string) => void—选项变化时触发的回调函数（受控）
classNamestring—自定义类名，用于样式扩展
...propsReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>—继承自 Radix 的其他属性
RadioGroupItemvaluestring—单选框的唯一标识，需与 RadioGroup 中的 value 匹配
classNamestring—自定义类名，用于样式扩展
disabledbooleanfalse是否禁用该选项
...propsReact.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>—继承自 Radix 的其他属性

🎨 样式说明​

  • RadioGroup：使用 grid gap-2 创建单选框项的间距。
  • RadioGroupItem：使用了 aspect-square 和 h-4 w-4 设置为一个 4x4 的圆形，加入了边框和自定义的选中指示器（使用 Circle 图标）。
  • 选中指示器：当单选框被选中时，RadioGroupPrimitive.Indicator 组件会渲染一个 Circle 图标，表示选中状态。
  • 禁用状态：如果 RadioGroupItem 被禁用，会添加 disabled:cursor-not-allowed 和 disabled:opacity-50 样式，禁止用户点击。

📐 设计说明​

  • 样式统一性：通过 className 可以灵活调整每个单选框的外观，提供统一的外观风格。
  • Radix 基础：基于 Radix UI 的组件封装，保证了组件的可访问性和性能。
  • 自定义指示器：使用 Lucide 的 Circle 图标，轻松实现自定义选中指示器。