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 优先)booleanundefined
label整组标签,关联 aria-labelledbystringundefined
labelPosition标签位置'top'|'left''top'
onFocus组级聚焦(子控件 focusin 冒泡)(e: FocusEvent) => voidundefined
onBlur组级失焦(子控件 focusout 冒泡)(e: FocusEvent) => voidundefined
class根节点自定义类名stringundefined
style根节点自定义内联样式stringundefined
children子输入控件Snippetundefined

Events

事件载荷说明
onFocus组内控件获得焦点
onBlur组内控件失去焦点

Slots

名称说明
children子输入控件(Input/Select/DatePicker 等)

Accessibility

ARIA rolegroup
  • 组容器 role=group
  • 有 label 时经 useId 关联 aria-labelledby
  • 各子控件保留自身 a11y

设计变量

变量默认值用法
--cd-inputgroup-border var(--cd-color-input-group-border-default)InputGroup 相邻控件分隔线颜色(组件消费)