<div class="demo-row"> <div class="segmented control" role="radiogroup" aria-label="统计周期"> <button class="segmented-item motion pressable" type="button">日</button> <button class="segmented-item motion pressable is-active" type="button">周</button> <button class="segmented-item motion pressable" type="button">月</button> </div> <div class="segmented segmented--sm control" role="radiogroup" aria-label="小号分段"> <button class="segmented-item motion pressable is-active" type="button">列表</button> <button class="segmented-item motion pressable" type="button">网格</button> </div></div><div class="demo-row" style="margin-top:16px"> <div class="toggle-group control" role="group" aria-label="对齐方式"> <button class="toggle-item motion pressable is-active" type="button">左对齐</button> <button class="toggle-item motion pressable" type="button">居中</button> <button class="toggle-item motion pressable" type="button">右对齐</button> </div></div><div class="demo-row" style="margin-top:16px"> <div class="stepper control"> <button class="stepper-btn pressable" type="button" data-step="-1" aria-label="减少"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button> <input class="stepper-input" type="number" value="3" min="0" max="10" step="1" aria-label="数量" /> <button class="stepper-btn pressable" type="button" data-step="1" aria-label="增加"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg></button> </div> <div class="otp" role="group" aria-label="短信验证码"> <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 1 位" /> <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 2 位" /> <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 3 位" /> <input class="otp-cell" maxlength="1" inputmode="numeric" aria-label="第 4 位" /> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import { initInput } from '@icen.ai/ui/kit/segmented';initInput();也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add segmented
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/segmented.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
import { initInput } from '@icen.ai/ui/behaviors/input';initInput(); // OTP 单元格的输入跳格 / 粘贴分摊由 input behavior 处理// segmented / toggle-group / stepper 为纯 CSS 契约，选中态由使用方切换