单选框组

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

安装

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

导入

用法

禁用状态

默认值

带描述

水平排列

受控组件

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

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

无效状态

插槽

• RadioGroup 插槽

  • base：单选框组根包装器，它包裹标签和包装器。
  • wrapper：单选框组包装器，它包裹所有单选框。
  • label：单选框组标签，它位于包装器之前。
  • description：单选框组的描述插槽。
  • errorMessage：单选框组的错误消息插槽。

• Radio 插槽

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

自定义样式

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

自定义实现

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

数据属性

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

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

• Radio 组件在其 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 属性