组件索引。
一共 33 个稳定组件、161 个部件。每一个条目都是这个包真实导出的名字, 部件清单由脚本从各包的公开 export 语句中抽取,不是从文档里抄的示意。 可试玩的组件右边可以直接操作。
对话框与浮层
4 个组件
AlertDialog可试玩
警告对话框
需要用户确认才继续的模态框,打开时焦点自动落到「取消」。
ActionCancelContentDescriptionOverlayPortalRootTitleTrigger
@radix-ui/react-alert-dialog本示例用到的部件
AlertDialog.RootAlertDialog.TriggerAlertDialog.PortalAlertDialog.OverlayAlertDialog.ContentAlertDialog.TitleAlertDialog.DescriptionAlertDialog.ActionAlertDialog.Cancel
Dialog可试玩
对话框
模态浮层:焦点锁定在其中,关闭后焦点回到触发它的那个按钮。
CloseContentDescriptionOverlayPortalRootTitleTrigger
@radix-ui/react-dialog本示例用到的部件
Dialog.RootDialog.TriggerDialog.PortalDialog.OverlayDialog.ContentDialog.TitleDialog.DescriptionDialog.Close
HoverCard可试玩
悬停卡片
指针停留后浮现的补充信息,与点击触发的 Popover 相对。
ArrowContentPortalRootTrigger
@radix-ui/react-hover-card本示例用到的部件
HoverCard.RootHoverCard.TriggerHoverCard.PortalHoverCard.ContentHoverCard.Arrow
Popover可试玩
气泡卡片
由点击或受控状态触发的浮层,可定位到触发器的某一侧。
AnchorArrowCloseContentDescriptionPortalRootTitleTrigger
@radix-ui/react-popover本示例用到的部件
Popover.RootPopover.TriggerPopover.AnchorPopover.PortalPopover.ContentPopover.ArrowPopover.ClosePopover.TitlePopover.Description
折叠与展开
2 个组件
Accordion可试玩
手风琴
一组可折叠的标题,正文同时只展开一项或多项。
ContentHeaderItemRootTrigger
@radix-ui/react-accordion本示例用到的部件
Accordion.RootAccordion.ItemAccordion.HeaderAccordion.TriggerAccordion.Content
无障碍、无样式、开放组合、非受控、开发者体验,以及渐进式采用。Collapsible可试玩
可折叠
单个区域的显示与隐藏,手风琴就是它加上了组与协调逻辑。
ContentRootTrigger
@radix-ui/react-collapsible本示例用到的部件
Collapsible.RootCollapsible.TriggerCollapsible.Content
表单控件
9 个组件
Checkbox可试玩
复选框
布尔或枚举多选,内置隐藏的原生 input 参与表单提交。
IndicatorRoot
@radix-ui/react-checkbox本示例用到的部件
Checkbox.RootCheckbox.Indicator
Form
表单
把匹配器、错误消息与提交状态接到原生表单约束上。
ControlFieldLabelMessageRootSubmitValidityState
@radix-ui/react-formLabel
标签
原生 label 元素,与 Radix 的表单控件配合提供可访问名称。
Root
@radix-ui/react-labelRadioGroup可试玩
单选组
一组互斥选项,方向键在未选中的项之间循环移动。
IndicatorItemRoot
@radix-ui/react-radio-group本示例用到的部件
RadioGroup.RootRadioGroup.ItemRadioGroup.Indicator
Select可试玩
选择器
复合控件:触发器、视口、滚动按钮与分组,键盘全流程可用。
ArrowContentGroupIconItemItemIndicatorItemTextLabelPortalRootScrollDownButtonScrollUpButtonSeparatorTriggerValueViewport
@radix-ui/react-select本示例用到的部件
Select.RootSelect.TriggerSelect.ValueSelect.IconSelect.PortalSelect.ContentSelect.ViewportSelect.ItemSelect.ItemTextSelect.ItemIndicator
Slider可试玩
滑块
在连续区间取值,滑块支持键盘微调并暴露当前数值。
RangeRootThumbTrack
@radix-ui/react-slider本示例用到的部件
Slider.RootSlider.TrackSlider.RangeSlider.Thumb
Switch可试玩
开关
立即生效的二态开关,与需要提交才生效的复选框相区分。
RootThumb
@radix-ui/react-switch本示例用到的部件
Switch.RootSwitch.Thumb
Toggle可试玩
切换按钮
两态按钮,本身不是一个分组,状态由 aria-pressed 表达。
Root
@radix-ui/react-toggle本示例用到的部件
Toggle.Root
ToggleGroup可试玩
切换组
多个切换按钮的集合,可单选可多选,含 roving focus。
ItemRoot
@radix-ui/react-toggle-group本示例用到的部件
ToggleGroup.RootToggleGroup.Item
状态反馈
3 个组件
Progress可试玩
进度条
以 aria-valuenow 表达进度的条形控件,数值变化时同步播报。
IndicatorRoot
@radix-ui/react-progress本示例用到的部件
Progress.RootProgress.Indicator
38%Toast可试玩
轻提示
短暂的消息通知,支持操作按钮与键盘可达的关闭控件。
ActionCloseDescriptionProviderRootTitleViewport
@radix-ui/react-toast本示例用到的部件
Toast.ProviderToast.RootToast.TitleToast.DescriptionToast.ActionToast.CloseToast.Viewport
Tooltip可试玩
文字提示
悬停或聚焦时出现的信息气泡,本身不能包含可交互元素。
ArrowContentPortalProviderRootTrigger
@radix-ui/react-tooltip本示例用到的部件
Tooltip.ProviderTooltip.RootTooltip.TriggerTooltip.PortalTooltip.ContentTooltip.Arrow
布局
9 个组件
AccessibleIcon
无障碍图标
装饰性图标包一层,供读屏器跳过而不必逐个处理 aria-hidden。
Root
@radix-ui/react-accessible-iconAspectRatio可试玩
宽高比
锁定子元素的宽高比,避免图片或视频加载时布局跳动。
Root
@radix-ui/react-aspect-ratio本示例用到的部件
AspectRatio.Root
16 / 9Avatar可试玩
头像
图片与备用文本二选一,图片加载失败时自动回退到首字母。
FallbackImageRoot
@radix-ui/react-avatar本示例用到的部件
Avatar.RootAvatar.ImageAvatar.Fallback
图片加载失败时回退到首字母Direction
方向
为下游组件提供书写方向,影响箭头与对齐的取值。
Provider
@radix-ui/react-directionPortal
传送门
把子树渲染到 DOM 的另一处,避开父级的 overflow 与 z-index 陷阱。
Root
@radix-ui/react-portalScrollArea可试玩
滚动区域
原生滚动加上自定义滚动条与视口,支持横向与纵向。
ContentCornerRootScrollbarThumbViewport
@radix-ui/react-scroll-area本示例用到的部件
ScrollArea.RootScrollArea.ViewportScrollArea.ScrollbarScrollArea.ThumbScrollArea.Corner
Separator可试玩
分隔线
带 role="separator" 的元素,语义为分隔而非纯粹画一根线。
Root
@radix-ui/react-separator本示例用到的部件
Separator.Root
分隔线是语义元素,role="separator"。
它的默认可聚焦性交给浏览器。
Slot
插槽
把 props 合并到你传入的子元素上,是 asChild 的底层实现。
Root
@radix-ui/react-slotVisuallyHidden
视觉隐藏
在视觉上移出屏幕但保留给读屏器,样式不隐藏语义。
Root
@radix-ui/react-visually-hidden