R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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。booleanfalse
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。booleanfalse
block让字段布局和控件撑满容器。booleanfalse
layout字段标题与控件的布局方向。'stacked' | 'inline''stacked'
aligninline 布局时控制标题列与控件列的纵向对齐。'start' | 'center' | 'end''start'
labelWidthinline 布局时自定义标题列宽度,支持 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.Floatingfloating-label 模式。保持 children 写法,也支持 caption、description、text、help、error 的字段级快捷写法。FC<FloatingLabelProps>-
Label.FloatingTextfloating-label 内部浮动文字片段,不追加 label class。FC<LabelTextProps>-
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS