ICEN UI
ICEN UI 分段选择
Docs ⌘K
Core · 稳定

分段选择

四件紧凑小控件：分段选择、切换组、数字步进器、验证码格。

Preview
表单 segmented
html
<div class="demo-row">  <div class="icen-segmented icen-control" role="radiogroup" aria-label="统计周期">    <button class="icen-segmented-item icen-motion icen-pressable" type="button" role="radio" aria-checked="false">日</button>    <button class="icen-segmented-item icen-motion icen-pressable is-active" type="button" role="radio" aria-checked="true">周</button>    <button class="icen-segmented-item icen-motion icen-pressable" type="button" role="radio" aria-checked="false">月</button>  </div>  <div class="icen-segmented icen-segmented--sm icen-control" role="radiogroup" aria-label="小号分段">    <button class="icen-segmented-item icen-motion icen-pressable is-active" type="button" role="radio" aria-checked="true">列表</button>    <button class="icen-segmented-item icen-motion icen-pressable" type="button" role="radio" aria-checked="false">网格</button>  </div></div><div class="demo-row" style="margin-top:16px">  <div class="icen-toggle-group icen-control" role="group" aria-label="对齐方式">    <button class="icen-toggle-item icen-motion icen-pressable is-active" type="button">左对齐</button>    <button class="icen-toggle-item icen-motion icen-pressable" type="button">居中</button>    <button class="icen-toggle-item icen-motion icen-pressable" type="button">右对齐</button>  </div></div><div class="demo-row" style="margin-top:16px">  <div class="icen-stepper icen-control">    <button class="icen-stepper-btn icen-pressable" type="button" data-icen-step="-1" aria-label="减少"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M4 10h12"></path></svg></button>    <input class="icen-stepper-input" type="number" value="3" min="0" max="10" step="1" aria-label="数量" />    <button class="icen-stepper-btn icen-pressable" type="button" data-icen-step="1" aria-label="增加"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M10 4v12M4 10h12"></path></svg></button>  </div>  <div class="icen-otp" role="group" aria-label="短信验证码">    <input class="icen-otp-cell" maxlength="1" inputmode="numeric" aria-label="第 1 位" />    <input class="icen-otp-cell" maxlength="1" inputmode="numeric" aria-label="第 2 位" />    <input class="icen-otp-cell" maxlength="1" inputmode="numeric" aria-label="第 3 位" />    <input class="icen-otp-cell" maxlength="1" inputmode="numeric" aria-label="第 4 位" />  </div></div>

特性

与工具条（toolbar）分工：segmented 是紧贴的互斥单选；toolbar 是宽松容器。

接口

导出
initInputinitSegmentedinitStepper 共享行为模块，清单含族内导出
事件
icen:check-changeicen:page-changeicen:rating-changeicen:segmented-changeicen:sort-changeicen:step-changeicen:stepper-changeicen:switch-change detail 契约见 IcenEventMap；共享行为模块，清单含族内事件
类型
dist/behaviors/controls.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/segmented';import { initInput, initSegmented, initStepper } from '@icen.ai/ui';initInput();initSegmented();initStepper();

也可以用脚手架直接打印引入行：

bash
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 项目无此问题。

用法

js
import { initSegmented, initStepper, initInput } from '@icen.ai/ui/kit/segmented';initSegmented(); // 点击 + ←/→/Home/End（RTL 镜像），选中跟随焦点，派 icen:segmented-changeinitStepper();   // ±step 并 clamp 到 min/max，派 icen:stepper-changeinitInput();     // OTP 单元格的输入跳格 / 粘贴分摊// toggle-group 为纯 CSS 契约，选中态由使用方切换