单选按钮组

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

安装

npx nextui-cli@latest add radio

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

导入

使用

禁用

默认值

带描述

水平

受控

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

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

无效

插槽

• RadioGroup 插槽

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

• Radio 插槽

  • base: 单选按钮根包装器，它包装所有元素。
  • wrapper: 单选按钮包装器，它包装控制元素。
  • 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 Props

RadioGroup 事件

单选按钮属性