Label 标签包装
Label 现在既可以继续做 input / select 的轻量包装,也可以直接承载字段标题、说明、反馈状态、尺寸和前后缀。 floating-label 模式展示,并补上字段级说明能力。
何时使用
- 需要把输入控件、前后缀和字段说明组合成一个一致的表单单元。
- 需要对 input、select、textarea 使用同一组 size、status、help 和 error 语义。
- 需要使用 daisyUI 的 input / select / floating-label 视觉,同时减少重复标记。
# Label for input
展示 input 包装写法:Label.Text 放在控件前面。
# Label for input at the end
后缀文本仍然可以手动放在输入控件后面。
# Label for select
control='select' 会把包装类切到 select。
# Label for date input
基础日期输入示例 保持,仍然是最轻量的包装。
# 字段说明
label、description、help、required、optional 会自动组成字段布局。
Workspace URL *Required
Use the public slug shown in team settings.
Only lowercase letters, numbers and dashes.
# 状态、颜色与尺寸
status 适合反馈状态,color 适合明确指定色彩层,size 直接落到 input/select/textarea 尺寸类。
Available slug
This slug is available.
Review needed
Double-check this value before publishing.
Blocked field
Use a company email address.
Extra small
Small
Medium
Large
Extra large
# 前后缀快捷写法
prefix 和 suffix 可以减少重复的 Label.Text,也仍然提供手动组合能力。
Package name
Manual affix pieces
# Textarea 字段
control='textarea' 让字段说明和 textarea 外观走同一套 API。
Release notes *
Keep the first line short enough for changelog summaries.
Release notes are required before publishing.
# 组合片段
Caption、Help 和 Text 可以在更自由的表单布局里单独使用。
Repository *Auto saved
Repository path looks good.
# Floating Label
基础 Floating 复合写法保持,FloatingText 不会追加 label class。
# Floating Label with Different Sizes
尺寸示例 保持,尺寸继续由内部 input 的 className 控制。
# Floating Label with feedback
Floating 也能使用 caption、text、help 和 error,适合完整表单字段。
Billing contact *
Invoices will be sent to this mailbox.
Recovery contact *
Use a company email address.
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 字段控件包装的根节点,默认保持原生 label 语义。 | 'label' | 'div' | 'label' |
control | 决定根节点使用 input、select、textarea 或纯文本 label 视觉类。 | 'input' | 'select' | 'textarea' | 'none' | 'input' |
label | 字段标题。传入后会自动生成标题行,并保持控件包装在下方。 | any | - |
description | 标题下的补充说明。 | any | - |
help | 控件下方的辅助说明。 | any | - |
error | 错误反馈。传入后会覆盖 help,并自动进入 error 状态。 | any | - |
required | 显示必填标记,并输出 aria-required。 | boolean | false |
optional / extra | 标题行右侧内容,适合放 optional、字数提示或状态说明。 | any | - |
prefix / suffix | 控件内部前后缀,会自动使用 label 文本片段视觉。 | any | - |
color | 控件颜色层。设置后会优先于 status。 | 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'default' |
status | 字段反馈状态,同时影响控件边框色和帮助文本色。 | 'default' | 'success' | 'warning' | 'error' | 'default' |
size | 控件尺寸,支持常用别名。 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'small' | 'middle' | 'medium' | 'large' | - |
variant | 控件视觉变体。outlined 维持默认边框,filled / ghost / borderless 提供额外风格。 | 'outlined' | 'filled' | 'ghost' | 'borderless' | 'outlined' |
disabled | 字段包装禁用态,追加禁用视觉和 aria-disabled。 | boolean | false |
block | 让字段布局和控件撑满容器。 | boolean | false |
layout | 字段标题与控件的布局方向。 | 'stacked' | 'inline' | 'stacked' |
align | inline 布局时控制标题列与控件列的纵向对齐。 | 'start' | 'center' | 'end' | 'start' |
labelWidth | inline 布局时自定义标题列宽度,支持 number 或任意合法 CSS 宽度。 | string | number | - |
rootClassName | 字段布局外层 className。只在生成字段布局时生效。 | string | - |
className | 控件包装节点 className。 | string | - |
复合组件
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
Label.Text | 普通包装里的文本片段,默认输出 span.label。 | FC<LabelTextProps> | - |
Label.Caption | 标题行片段,可手动组合 required、optional 和 extra。 | FC<LabelCaptionProps> | - |
Label.Help | 辅助文本片段,支持 status 色彩。 | FC<LabelHelpProps> | - |
Label.Floating | floating-label 模式。保持 children 写法,也支持 caption、description、text、help、error 的字段级快捷写法。 | FC<FloatingLabelProps> | - |
Label.FloatingText | floating-label 内部浮动文字片段,不追加 label class。 | FC<LabelTextProps> | - |