InputGroup
输入组合容器:将多个输入类控件(Input/Select/DatePicker 等)拼接为一体(相邻边框合并、首尾圆角),统一 size/disabled 经 context 回退透传(控件显式 prop 优先),可选整组 label。
如何引入
import { InputGroup } from '@chenzy-design/svelte';API 参考
InputGroup
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 整组尺寸,回退透传子控件(子控件显式 size 优先) | 'small'|'default'|'large' | undefined |
disabled | 整组禁用,回退透传子控件(子控件显式 disabled 优先) | boolean | undefined |
label | 整组标签,关联 aria-labelledby | string | undefined |
labelPosition | 标签位置 | 'top'|'left' | 'top' |
onFocus | 组级聚焦(子控件 focusin 冒泡) | (e: FocusEvent) => void | undefined |
onBlur | 组级失焦(子控件 focusout 冒泡) | (e: FocusEvent) => void | undefined |
class | 根节点自定义类名 | string | undefined |
style | 根节点自定义内联样式 | string | undefined |
children | 子输入控件 | Snippet | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onFocus | — | 组内控件获得焦点 |
onBlur | — | 组内控件失去焦点 |
Slots
| 名称 | 说明 |
|---|---|
children | 子输入控件(Input/Select/DatePicker 等) |
Accessibility
| ARIA role | group |
- 组容器 role=group
- 有 label 时经 useId 关联 aria-labelledby
- 各子控件保留自身 a11y
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-inputgroup-border | var(--cd-color-input-group-border-default) | InputGroup 相邻控件分隔线颜色(组件消费) |