所有组件
浏览 HeroUI v3 全部 84 个组件模块、复合 API 与本地交互预览。
操作与选择
按钮与直接选择控件。
按钮 / Button
按钮的 HeroUI v3 本地交互示例。
@heroui/react13 个示例 · 4 个 API按钮组 / Button Group
按钮组的 HeroUI v3 本地交互示例。
@heroui/react8 个示例 · 6 个 API关闭按钮 / Close Button
关闭按钮的 HeroUI v3 本地交互示例。
@heroui/react3 个示例 · 3 个 API切换按钮 / Toggle Button
切换按钮的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 3 个 API切换按钮组 / Toggle Button Group
切换按钮组的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 6 个 API开关 / Switch
开关的 HeroUI v3 本地交互示例。
@heroui/react15 个示例 · 7 个 API开关组 / Switch Group
开关组的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API复选框 / Checkbox
复选框的 HeroUI v3 本地交互示例。
@heroui/react14 个示例 · 6 个 API复选框组 / Checkbox Group
复选框组的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 2 个 API单选框 / Radio
单选框的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 6 个 API单选框组 / Radio Group
单选框组的 HeroUI v3 本地交互示例。
@heroui/react11 个示例 · 3 个 API表单与输入
输入、字段、校验与表单组合。
自动完成 / Autocomplete
自动完成的 HeroUI v3 本地交互示例。
@heroui/react20 个示例 · 9 个 API组合框 / Combo Box
组合框的 HeroUI v3 本地交互示例。
@heroui/react18 个示例 · 7 个 API输入框 / Input
输入框的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 3 个 API输入框组 / Input Group
输入框组的 HeroUI v3 本地交互示例。
@heroui/react20 个示例 · 7 个 API验证码输入 / Input OTP
验证码输入的 HeroUI v3 本地交互示例。
@heroui/react10 个示例 · 9 个 API多行输入框 / Text Area
多行输入框的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 3 个 API文本字段 / Text Field
文本字段的 HeroUI v3 本地交互示例。
@heroui/react12 个示例 · 4 个 API搜索字段 / Search Field
搜索字段的 HeroUI v3 本地交互示例。
@heroui/react14 个示例 · 7 个 API数字字段 / Number Field
数字字段的 HeroUI v3 本地交互示例。
@heroui/react16 个示例 · 7 个 API选择器 / Select
选择器的 HeroUI v3 本地交互示例。
@heroui/react17 个示例 · 7 个 API滑块 / Slider
滑块的 HeroUI v3 本地交互示例。
@heroui/react5 个示例 · 8 个 API表单 / Form
表单的 HeroUI v3 本地交互示例。
@heroui/react2 个示例 · 2 个 API字段组 / Fieldset
字段组的 HeroUI v3 本地交互示例。
@heroui/react2 个示例 · 6 个 API标签 / Label
标签的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API描述 / Description
描述的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API错误消息 / Error Message
错误消息的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API字段错误 / Field Error
字段错误的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API颜色选择
支持无障碍的颜色选择与编辑控件。
颜色区域 / Color Area
颜色区域的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 4 个 API颜色字段 / Color Field
颜色字段的 HeroUI v3 本地交互示例。
@heroui/react12 个示例 · 3 个 API颜色输入组 / Color Input Group
颜色输入组的 HeroUI v3 本地交互示例。
@heroui/react/color-input-group1 个示例 · 6 个 API颜色选择器 / Color Picker
颜色选择器的 HeroUI v3 本地交互示例。
@heroui/react5 个示例 · 5 个 API颜色滑块 / Color Slider
颜色滑块的 HeroUI v3 本地交互示例。
@heroui/react8 个示例 · 6 个 API色板 / Color Swatch
色板的 HeroUI v3 本地交互示例。
@heroui/react7 个示例 · 3 个 API色板选择器 / Color Swatch Picker
色板选择器的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 6 个 API日期与时间
日期与时间输入及选择模式。
日期字段 / Date Field
日期字段的 HeroUI v3 本地交互示例。
@heroui/react16 个示例 · 3 个 API日期输入组 / Date Input Group
日期输入组的 HeroUI v3 本地交互示例。
@heroui/react/date-input-group1 个示例 · 8 个 API日期选择器 / Date Picker
日期选择器的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 6 个 API日期范围选择器 / Date Range Picker
日期范围选择器的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 7 个 API时间字段 / Time Field
时间字段的 HeroUI v3 本地交互示例。
@heroui/react14 个示例 · 3 个 API列表与数据
可选择集合、结构化数据与标签。
列表框 / List Box
列表框的 HeroUI v3 本地交互示例。
@heroui/react8 个示例 · 3 个 API列表框项目 / List Box Item
列表框项目的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 4 个 API列表框分组 / List Box Section
列表框分组的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API表格 / Table
表格的 HeroUI v3 本地交互示例。
@heroui/react12 个示例 · 17 个 API标签 / Tag
标签的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 4 个 API标签组 / Tag Group
标签组的 HeroUI v3 本地交互示例。
@heroui/react11 个示例 · 5 个 API内容展示
内容、身份、排版与视觉表面。
头像 / Avatar
头像的 HeroUI v3 本地交互示例。
@heroui/react7 个示例 · 5 个 API徽标 / Badge
徽标的 HeroUI v3 本地交互示例。
@heroui/react7 个示例 · 5 个 API卡片 / Card
卡片的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 8 个 API标签胶囊 / Chip
标签胶囊的 HeroUI v3 本地交互示例。
@heroui/react4 个示例 · 4 个 API键盘按键 / Kbd
键盘按键的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 7 个 API分隔线 / Separator
分隔线的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 3 个 API表面 / Surface
表面的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 4 个 API排版 / Typography
排版的 HeroUI v3 本地交互示例。
@heroui/react4 个示例 · 7 个 API标题 / Header
标题的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API滚动阴影 / Scroll Shadow
滚动阴影的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 4 个 API状态与反馈
状态、进度、加载与通知反馈。
提示 / Alert
提示的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 7 个 API进度条 / Progress Bar
进度条的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 6 个 API环形进度 / Progress Circle
环形进度的 HeroUI v3 本地交互示例。
@heroui/react6 个示例 · 6 个 API度量条 / Meter
度量条的 HeroUI v3 本地交互示例。
@heroui/react5 个示例 · 6 个 API骨架屏 / Skeleton
骨架屏的 HeroUI v3 本地交互示例。
@heroui/react7 个示例 · 3 个 API加载指示器 / Spinner
加载指示器的 HeroUI v3 本地交互示例。
@heroui/react3 个示例 · 3 个 API空状态 / Empty State
空状态的 HeroUI v3 本地交互示例。
@heroui/react1 个示例 · 3 个 API轻提示 / Toast
轻提示的 HeroUI v3 本地交互示例。
@heroui/react9 个示例 · 15 个 API弹层与对话框
对话框、抽屉、弹出框与上下文浮层。
警告对话框 / Alert Dialog
警告对话框的 HeroUI v3 本地交互示例。
@heroui/react13 个示例 · 13 个 API抽屉 / Drawer
抽屉的 HeroUI v3 本地交互示例。
@heroui/react8 个示例 · 13 个 API模态框 / Modal
模态框的 HeroUI v3 本地交互示例。
@heroui/react13 个示例 · 13 个 API弹出框 / Popover
弹出框的 HeroUI v3 本地交互示例。
@heroui/react5 个示例 · 8 个 API工具提示 / Tooltip
工具提示的 HeroUI v3 本地交互示例。
@heroui/react5 个示例 · 6 个 API展开与折叠
展开与折叠相关内容。
开发中
已经公开导出、但上游仍标记为开发中的日历模块。
本地来源: vendor/zh/react/components/index.mdx
文档根据 HeroUI v3 固定提交生成，已调整内部链接与交互预览以适配 JGuang。