开关与选择

switch

纯 CSS 状态组件：开关两档尺寸；勾选框三态（未选 / 已选 / 半选）；单选行组排他。

示例

<div class="demo-row">
  <button class="switch" type="button" role="switch" aria-checked="true" aria-label="标准开关（开）"><span class="switch-thumb"></span></button>
  <button class="switch" type="button" role="switch" aria-checked="false" aria-label="标准开关（关）"><span class="switch-thumb"></span></button>
  <button class="switch switch--sm" type="button" role="switch" aria-checked="true" aria-label="小号开关"><span class="switch-thumb"></span></button>
</div>
<div class="demo-row" style="margin-top:16px">
  <button class="checkbox focus-ring" type="button" role="checkbox" aria-checked="false" aria-label="未选中"></button>
  <button class="checkbox focus-ring" type="button" role="checkbox" aria-checked="true" aria-label="已选中"></button>
  <button class="checkbox focus-ring" type="button" role="checkbox" aria-checked="mixed" aria-label="半选"></button>
</div>
<div class="demo-col" style="margin-top:16px">
  <div class="radio-group" role="radiogroup" aria-label="套餐">
    <button class="radio-item motion is-selected" type="button" role="radio" aria-checked="true"><span class="radio-dot"></span>基础版</button>
    <button class="radio-item motion" type="button" role="radio" aria-checked="false"><span class="radio-dot"></span>专业版</button>
    <button class="radio-item motion" type="button" role="radio" aria-checked="false"><span class="radio-dot"></span>旗舰版</button>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/switch.css';

用法

<button class="switch" type="button" role="switch" aria-checked="false">
  <span class="switch-thumb"></span>
</button>
<!-- 状态由使用方驱动：点击切换 aria-checked，CSS 负责全部视觉 -->