#开关

#用途

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/switch.css";
@import "@a3s-lab/ui/styles/a3s.css";

<input type="checkbox" role="switch" class="input" />

#HTML 结构

<input type="checkbox" role="switch" class="input">

The switch control. Use native checkbox state: add checked for an initially enabled switch, disabled for a disabled switch, and aria-invalid="true" for invalid state.

data-size="sm" Optional

Renders the smaller switch size.

#示例

#说明

#选择卡

Use a wrapping <label> when the whole card should toggle the switch.

#已禁用

当周围字段应使用禁用样式时，将 disabled 添加到开关，将 data-disabled="true" 添加到字段包装器。

#无效

将 aria-invalid="true" 添加到交换机，并将 data-invalid="true" 添加到字段包装器。

#尺寸

使用data-size="sm"渲染较小的开关尺寸。

#RTL

切换字段布局使用文档方向。在字段或祖先上设置 dir="rtl"。