Form Components

Interactive form components including buttons, inputs, selects, sliders, toggles, OTP inputs, and date pickers

Button & ButtonGroup 按钮与按钮组

支持多种样式变体、尺寸和组合形态

ButtonGroup 按钮组：

Input & InputGroup 输入框组合

标准输入框与带图标/按钮的增强组合框

基础输入框

InputGroup 前置图标

InputGroup 后置按钮

禁用状态

Field 字段控制

集成 Label、提示信息与校验错误的规范表单项

Textarea 文本域

多行文本输入组件

自我介绍

只读备注

Select & NativeSelect 下拉选择

富文本下拉选择与移动端原生选择器

标准 Select

NativeSelect 原生选择

Checkbox & RadioGroup 勾选与单选

多选框与单选按钮组

Checkbox 复选框

接受服务条款与隐私政策

订阅每周技术周刊

已开启双重认证 (锁定)

RadioGroup 单选组

个人开发者计划

团队协作计划

企业专有计划

Switch & Slider 开关与滑块

状态切换与数值区间调节

Switch 状态开关

启用实时通知推送

自动保存草稿

硬件加速 (不可用)

Slider 数值滑块: 40%

亮度范围调节 (禁用状态)

Toggle & ToggleGroup 切换开关组

富文本格式切换与排版布局控制

单个 Toggle

单选 ToggleGroup (对齐)

多选 ToggleGroup (样式)

InputOTP 验证码输入

支持自动分割、按格聚焦的高灵敏度 OTP 输入

请输入短信验证码：

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

DatePicker 日期选择与范围预设

基于 Popover 与 Calendar 复合架构封装的高灵活性日期选择：支持单日期、起止区间范围选择与快捷预设

单日期拾取 (Single Date)

标准单日点选，内置中文本地化格式

日期区间选择 (Date Range)

双月份跨越式起止区间选择

快捷预设拾取 (Presets)

提供今天、明天、一周后等快捷按钮