Components

Form Wraps a native <form>, serializes its fields, and hands you the result on submit. Field Binds a form's validation errors to a field by name, for use inside Form. FormControl Composes label, description, and error text around any custom control. Input A single-line text field with built-in label, validation, and sizing. Textarea A multi-line text field for longer, free-form content. Select A searchable dropdown supporting single and multiple selection, with chips for multiple. NativeSelect A select built on the browser's own <select>, styled to match the rest of the form components. Autocomplete A type-ahead combobox that filters its options as you type. Checkbox A single toggle for binary or tri-state choices. CheckboxGroup Lets users select multiple options from a set of choices, with shared validation. Radio A single option within a mutually exclusive set. RadioGroup Manages a set of radio options and their shared selection. Switch An on/off toggle styled as a physical switch.

Avatar Displays a person or entity as an image, initials, or icon. Collapsible Shows and hides content with an animated, accessible disclosure. Divider A visual or semantic separator between sections of content. Skeleton A placeholder shape that stands in for content while it loads. Spinner An indeterminate loading indicator. Toggle A template helper, called as toggleState(), for tracking boolean state with a toggle() method. Kbd Renders keyboard keys and shortcuts, correct on every platform. Press A modifier that normalizes press interactions across mouse, touch, keyboard, and screen readers. dragToDismiss A modifier that turns pointer drags into a dismiss gesture along a single axis. Ref A modifier factory, called as ref(), for capturing a reactive reference to a DOM element. RovingFocus A modifier that gives a group of controls single-tab-stop, arrow-key keyboard navigation. SelectionIndicator A modifier that tracks the selected item in a group and publishes its geometry as CSS custom properties. VisuallyHidden Hides content visually while keeping it available to screen readers.

Button The base pressable action, with colors, variants, and sizes. ButtonGroup Groups related buttons, including toggling segmented sets. ToggleButton A button that holds a pressed/unpressed state. SegmentedControl A row of mutually exclusive options with an indicator that slides between them. CloseButton A dedicated icon button for dismissing dialogs, tags, and banners. Chip A compact label for statuses, filters, and removable tags.

Modal A focus-trapped dialog layered above the page. Drawer A panel that slides in from an edge of the screen. Popover Floating content anchored to a trigger element. Overlay The foundation Modal, Drawer, and Popover are all built on. Portal Renders content into a different part of the DOM tree, escaping clipped or stacked parents. Tooltip A short, non-interactive hint shown next to whatever a user hovers or focuses.

Table A sortable, selectable table backed by typed column definitions. SimpleTable A foundational table for manual composition, without Table's sorting and selection. Listbox A keyboard-navigable list of selectable options. Dropdown Combines a trigger button with a floating panel of actions or options. Calendar A month-grid date picker for choosing a single day or a range, with full keyboard navigation. Command A command palette: a search field over a ranked, optionally grouped list of commands.

Alert Displays an important message inline in the page until removed. ProgressBar Communicates the progress of a determinate or indeterminate task. Notifications Toasts with live regions, placement, and auto-dismiss.

Tabs A set of panels shown one at a time, with an indicator that slides between them. TabNav A navigation bar styled like Tabs, for links that change the page. Breadcrumbs A trail of links showing where the current page sits, collapsing the middle when it gets long. Pagination A row of controls for moving through a paged list, with page numbers and prev/next. ExternalLink A link to another site, marked with an icon and opened in a new tab.

Accordion A vertically stacked set of headings that each reveal a section of content.