开关

开关组件用于在选中和未选中状态之间切换。

安装

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

导入

用法

带标签

禁用

尺寸

颜色

带滑块图标

带图标

您还可以使用 startContent 和 endContent 属性在开关的开头和结尾添加图标。

受控

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

插槽

• base：开关的基础插槽。它是主要的包装器。
• wrapper：开始图标、结束图标和滑块的包装器。
• hiddenInput：用于处理开关状态的隐藏输入元素。
• thumb：开关的滑块元素。它是圆形元素。
• label：开关的标签插槽。
• startContent：开关开始处的图标插槽。
• endContent：开关结束处的图标插槽。
• thumbIcon：滑块内部的图标插槽。

自定义样式

你可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Switch 组件。

自定义实现

如果你需要进一步自定义 switch，你可以使用 useSwitch hook 来创建你自己的实现。

数据属性

Switch 组件在 base 元素上具有以下属性

• data-selected: 当 switch 被选中时。基于 isSelected prop。
• data-pressed: 当 switch 被按下时。基于 usePress
• data-readonly: 当 switch 是只读时。基于 isReadOnly prop。
• data-hover: 当 switch 正在被悬停时。基于 useHover
• data-focus: 当 switch 正在被聚焦时。基于 useFocusRing。
• data-focus-visible: 当 switch 正在通过键盘被聚焦时。基于 useFocusRing。
• data-disabled: 当 switch 被禁用时。基于 isDisabled prop。

可访问性

• 使用原生 HTML <input> 元素构建。
• 完全支持浏览器功能，例如表单自动填充。
• 键盘焦点管理和跨浏览器标准化。
• 键盘事件支持 Tab 和 Space 键。
• 为辅助技术提供标签支持。
• 通过 ARIA 作为 switch 暴露给辅助技术

API

Switch 属性

Switch 事件

类型

Switch Icon 属性