输入
Label
用于关联表单控件和说明文本的可访问标签组件
Label 用于为表单控件提供可访问名称。组件基于 Radix Label 封装，支持 htmlFor 关联控件，并提供项目统一的字号尺寸。
import { Label } from '@skyroc/web-ui';何时使用
- 需要为 Input、Checkbox、Radio、Select 等表单控件提供标题或说明。
- 点击标签文本时需要聚焦或触发对应控件。
- 表单项需要统一的字号和字重。
- 复杂表单布局可以搭配 Form 组件；单独控件说明可以直接使用 Label。
基础用法
通过 htmlFor 关联对应表单控件的 id。
Preview
Code
Loading...
尺寸
通过 size 调整 Label 字号，从 xs 到 2xl 共 6 个尺寸。通常应和对应控件使用相同尺寸。
Preview
Code
Loading...
必填标记
Label 本身不内置必填星号，可以在 children 中组合自定义标记。
Preview
Code
Loading...
禁用状态
Label 样式包含 peer-disabled 规则。如果需要标签跟随控件禁用态变化，需要在控件结构中配合 peer class；单独设置控件 disabled 不会自动改变相邻 Label。
Preview
Code
Loading...
API
Label
通用属性参考：继承 Radix Label Root 属性，并通过项目尺寸控制字号。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 标签内容 | ReactNode | - |
| htmlFor | 关联表单控件的 id | string | - |
| size | 尺寸，影响标签字号 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' |
| className | 自定义 class | ClassValue | - |
| asChild | 使用子元素替代默认 label 元素 | boolean | - |
类型
LabelProps
Label 组件属性。继承 Radix Label Root props，并通过 StyledComponentProps 增加 className 和 size。
| 字段 | 类型 | 说明 |
|---|---|---|
| asChild | boolean | 使用子元素替代默认 label 元素。 |
| children | ReactNode | 标签内容。 |
| className | ClassValue | 自定义 class。 |
| htmlFor | string | 关联表单控件的 id。 |
| id | string | DOM id。 |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 组件尺寸。 |
StyledComponentProps<T>
项目内用于包装组件 props 的通用类型。
| 字段 | 类型 | 说明 |
|---|---|---|
| ...sourceProps | inherited props without className | 继承原始组件属性，但重新定义 className。 |
| className | ClassValue | 组件 class。 |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 项目统一尺寸类型。 |