单选按钮组

单选按钮组允许用户从一组互斥的选项中选择一个选项。

安装

以上命令仅适用于单独安装。如果已全局安装 @nextui-org/react ，则可以跳过此步骤。

导入

用法

禁用

默认值

带描述

水平

受控

您可以使用 value 和 onValueChange 属性来控制单选按钮的输入值。

注意：NextUI Radio 也支持原生事件，例如 onChange，这对于表单库（如 Formik 和 React Hook Form）非常有用。

无效

插槽

• RadioGroup 插槽

  • base: 单选组根包装器，它包裹标签和包装器。
  • wrapper: 单选组包装器，它包裹所有单选按钮。
  • label: 单选组标签，它放置在包装器之前。
  • description: 单选组的描述插槽。
  • errorMessage: 单选组的错误消息插槽。

• 单选按钮插槽

  • base: 单选按钮根包装器，它包裹所有元素。
  • wrapper: 单选按钮包装器，它包裹控制元素。
  • hiddenInput: 用于处理单选按钮状态的隐藏输入元素。
  • labelWrapper: 标签和描述包装器。
  • label: 单选按钮的标签插槽。
  • control: 控制元素，它是圆形元素。
  • description: 单选按钮的描述插槽。

自定义样式

您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 RadioGroup 和 Radio 组件。

自定义实现

如果您需要进一步自定义单选组，可以使用 useRadio 钩子来创建您自己的实现。

数据属性

• RadioGroup 在 base 元素上具有以下属性

  • data-orientation: 单选组的方向。基于 orientation 属性。

• 单选按钮在 base 元素上具有以下属性

  • data-selected: 当单选按钮被选中时。基于 isSelected 属性。
  • data-pressed: 当单选按钮被按下时。基于 usePress。
  • data-invalid: 当单选按钮无效时。基于 validationState 属性。
  • data-readonly: 当单选按钮为只读时。基于 isReadOnly 属性。
  • data-hover-unselected: 当单选按钮被悬停且未选中时。基于 useHover。
  • data-hover: 当单选按钮被悬停时。基于 useHover。
  • data-focus: 当单选按钮被聚焦时。基于 useFocusRing。
  • data-focus-visible: 当单选按钮使用键盘聚焦时。基于 useFocusRing。
  • data-disabled: 当单选按钮被禁用时。基于 isDisabled 属性。

辅助功能

• 单选组通过 ARIA 向辅助技术公开。
• 每个单选按钮都使用原生的 HTML <input> 元素构建，该元素可以选择性地视觉隐藏以允许自定义样式。
• 完全支持浏览器功能，如表单自动填充。
• 支持箭头键的键盘事件。
• 键盘焦点管理和跨浏览器规范化。
• 辅助技术的组和单选按钮标签支持。

API

RadioGroup 属性

RadioGroup 事件

Radio 属性