单选框组

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

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

禁用状态

默认值

带描述

水平排列

受控模式

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

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

无效状态

插槽

• RadioGroup 插槽

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

• Radio 插槽

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

自定义样式

您可以通过向组件插槽传递自定义的 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 属性