Components
Components overview
Every documented component and its category, with search by name, description and category.
Component list
Section titled “Component list”The search box matches the name, description and category; the category buttons narrow the table to one group.
Showing 106 of 106 components
| Component | Category |
|---|---|
| Accordion A stack of headers that each open and close a section of content. | Layout and base |
| Box A container that applies padding, surface colour, border and corner radius from token values. | Layout and base |
| Collapsible Shows and hides one section of content. | Layout and base |
| Container Centres page content and limits its width. | Layout and base |
| Grid An equal-column, responsive grid for page regions and widget layouts, with a cell component (Grid.Item). | Layout and base |
| Heading Sets page and section headings; the document level is separate from the visual size. | Layout and base |
| Icon Draws a glyph from the registered icon set; it is decorative and hidden from screen readers unless it has a label. | Layout and base |
| Inline Lays children out horizontally, wraps them to a new row when space runs out and sets the space between them with a token. | Layout and base |
| Kbd Shows a keyboard key or shortcut. | Layout and base |
| Provider Sets the language, text direction and motion preference for everything inside it, without changing layout. | Layout and base |
| ScrollArea A scrollable region with thin themed scrollbars and fading edges. | Layout and base |
| Separator A thin rule that splits content into groups, with an optional short label in the middle. | Layout and base |
| Stack Lays children out vertically and sets the space between them with a token. | Layout and base |
| Text Sets body text, labels, captions and figures in token typography. | Layout and base |
| VisuallyHidden Hides content visually and keeps it available to screen readers. | Layout and base |
| ActionBar Bulk actions for selected items; it appears with the first selection and says how many items are selected. | Actions |
| Button Lets people start an action and makes the most important action in an area easy to find. | Actions |
| ButtonGroup Gathers related buttons into one row or column, spaced or joined. | Actions |
| ContextMenu An action menu that opens at the pointer on right click or long press on an area. | Actions |
| Copy A button that copies a value to the clipboard, confirms it with a check mark and announces it. | Actions |
| DropdownMenu A list of actions behind a button, with selection items, groups, submenus and shortcuts. | Actions |
| IconButton An action button that shows only an icon and has a required accessible name. | Actions |
| Link A link to a route or URL, inside running text or on its own line. | Actions |
| SaveBar A bar that rises from the bottom while a form has unsaved changes, with Save and Discard. | Actions |
| SegmentedControl A single choice among two to five views of the same content, with a sliding thumb. | Actions |
| SplitButton A button that joins a main action to a menu button listing related actions. | Actions |
| Toggle A two-state button that stays pressed and turns a setting on or off. | Actions |
| ToggleGroup A set of Toggles that share one value, with one tab stop and arrow keys between items. | Actions |
| Toolbar A row of related controls with a single tab stop, moved through with the arrow keys. | Actions |
| AmountInput An amount of money typed in the Provider language and reported in exact minor units, never a float. | Forms |
| Autocomplete A text input that suggests values while the user types but accepts any text. | Forms |
| Calendar A month grid for picking one date; in Turkish the week starts on Monday. | Forms |
| Checkbox A box that is checked or not, with its label beside it. | Forms |
| CheckboxGroup Gathers related checkboxes under one legend and shares their list of values. | Forms |
| Combobox Choose one or several options from a list narrowed by typing; supports server results and adding new options. | Forms |
| ConsentBlock A text to read in a scroll region, with a reading bar and a consent checkbox that can wait until the end. | Forms |
| DatePicker A date field typed into day, month and year segments or picked from a calendar popup. | Forms |
| DateRangePicker A date range typed into start and end segments or picked with preset ranges and a two-month calendar. | Forms |
| DateTimePicker A field group that chooses a date and a time together: a DatePicker and a TimeField. | Forms |
| Field The wrapper that wires label, control, help text, error and counter by ids for any form control. | Forms |
| FileDropzone A drop area for files, with a file chooser and a list of the chosen files. | Forms |
| Form A form that checks its fields on submit, lists problems in a linked summary and moves focus to it. | Forms |
| IbanInput A Turkish IBAN field: a fixed TR prefix, digits grouped in fours as they are typed, and a mod 97 check. | Forms |
| InlineEdit A value shown as text that turns into an input in place, with save and cancel. | Forms |
| InputGroup Puts a text control and its addons before, after, above or below it in one box. | Forms |
| Label A label that names a control outside Field and carries the necessity marker. | Forms |
| MonthPicker A field that chooses a month and year from the twelve months of a year. | Forms |
| NativeSelect The browser's own select list, in a closed field that looks like Select. | Forms |
| NumberField A number field with step buttons and local formatting, for values that are not money. | Forms |
| OtpInput A one-time code field with one box per character and a single tab stop. | Forms |
| PasswordInput A password field with an eye button, and an optional rule list, strength bar and Caps Lock warning. | Forms |
| PhoneInput A phone field with a country code picker; Turkey by default, sent in E.164. | Forms |
| RadioCard A large choice with a title, description and icon, used inside a RadioGroup; the whole card is clickable. | Forms |
| RadioGroup Gathers options that exclude each other under one legend and allows exactly one choice. | Forms |
| SearchInput A search field with a clear button, debounced search and a loading state. | Forms |
| Select A single choice from a short closed list, opened from a trigger. | Forms |
| Slider Pick a value or a range by dragging a thumb along a track, or with the arrow keys. | Forms |
| Switch An on or off setting that takes effect at once, with its label beside it. | Forms |
| Textarea Multi-line text entry for descriptions, reasons and notes. | Forms |
| TextInput Lets people enter a single line of text or a number, with the label, help text and error message tied to the field. | Forms |
| TimeField A 24-hour time field typed into hour and minute (and optional second) segments. | Forms |
| YearPicker A field that chooses a year from a page of twelve years. | Forms |
| Avatar Identifies a person or company with a picture, or with initials when there is none, and an optional status dot. | Data display |
| Badge Shows the status of a record with a short text and a colour. | Data display |
| Card Keeps related content and actions together on one surface. | Data display |
| Chart Line, area, bar, stacked bar and donut charts and a small trend line; every chart comes with a summary and a data table. | Data display |
| CodeBlock Shows code in the mono type with an optional header, line numbers and a copy button. | Data display |
| CountdownTimer Time left until a moment, as a clock with an optional draining ring, a warning colour and spoken milestones. | Data display |
| DataTable Shows large or changing data in a table with sorting, selection, column visibility and virtualisation. | Data display |
| DateTimeText A date, a time or a relative time in a time element, written with Intl in the Provider language. | Data display |
| DescriptionList Shows the fields of a record as term and value pairs, with native dl, dt and dd elements. | Data display |
| FilterBar Filter controls for a list or table: applied-filter chips, a result count and one-click clear. | Data display |
| ListItem One row of a list: a leading visual, a title and subtitle, and meta or an action at the end. | Data display |
| MaskedValue A sensitive value shown masked, with a toggle that reveals it and an optional Copy button. | Data display |
| Meter Shows one value in a known range as a bar: storage used, a quota, a score. | Data display |
| MoneyText An amount of money written exactly from minor units, in the Provider language. | Data display |
| Pagination Page or cursor navigation under tables and lists, with a page size choice. | Data display |
| QrCode Shows a finished payload as a QR code, with dark modules on a light background in every theme and in print. | Data display |
| StatCard Shows the value of one measure, its change against a period and an optional trend in one tile. | Data display |
| StatusBadge Shows a status from the shared status vocabulary, with a tone, an icon and text. | Data display |
| Table Shows small, read-only data in a semantic HTML table. | Data display |
| Tag Labels a category, an applied filter or a recipient; it can be removable or selectable. | Data display |
| Timeline Events in order along a rail: a marker, a title, a time and optional detail. | Data display |
| Banner A full-width message at the top of the app or page about something that affects everything below. | Feedback |
| EmptyState An explanation and the next step shown when a page, panel or list is still empty or a search finds nothing. | Feedback |
| InlineAlert An information, success, warning or error message inside the content about a section, a form or the page. | Feedback |
| ProgressBar A bar that shows how far a task has come, or sweeps while the remaining time is unknown. | Feedback |
| ResultState The screen at the end of a task or flow that shows the outcome, what happens next and the next steps. | Feedback |
| Skeleton A placeholder in the shape of content that is still loading. | Feedback |
| Spinner An open arc that turns while something loads and reports the state to screen readers. | Feedback |
| Toast A short message about the result of an action that appears in a corner of the page, stacks and can be swiped away. | Feedback |
| AlertDialog A modal window that interrupts a task to ask one question, to confirm or cancel. | Overlays |
| Dialog A modal window over the page that holds focus for one task or decision. | Overlays |
| Drawer A panel that slides in from the edge or the bottom to show details, filters or a sub-form without leaving the page. | Overlays |
| InfoPopover A small info button next to a label or value that opens a short explanation on press. | Overlays |
| Popconfirm A small confirmation panel next to a button that asks yes or no before a light action. | Overlays |
| Popover A non-modal panel with interactive content, anchored to the button that opens it. | Overlays |
| PreviewCard A link that shows a short preview of its destination on hover or focus. | Overlays |
| Tooltip A short hint that appears beside an element on hover and keyboard focus. | Overlays |
| Anchor In-page navigation that links to the sections of a long page and marks the one being read. | Navigation and shell |
| AppShell The application frame: a collapsible sidebar, a menu drawer on mobile, a top bar and the page content. | Navigation and shell |
| Breadcrumbs A location trail that shows where the current page sits in the hierarchy and folds long trails. | Navigation and shell |
| Command A palette that searches and runs grouped commands with shortcuts; in place or in a dialog opened with ⌘K. | Navigation and shell |
| PageHeader The top of a page: location, title, status, description and main actions. | Navigation and shell |
| Stepper Steps showing where the user is in a multi-step flow, with WizardFooter for Back and Next. | Navigation and shell |
| Tabs Tabs with an animated indicator that switch between panels of the same context. | Navigation and shell |
No component matches your search. Try another word or set the category to All.
Categories
Section titled “Categories”| Category | Contents |
|---|---|
| Layout and base | Page and section layout, text, icons, separators, disclosure and Provider |
| Actions | Controls that start an action: Button, menus, toolbars, toggles |
| Forms | Data entry: field structure, text fields, selection controls |
| Data display | Tables, cards, lists, badges, charts and the controls that filter them |
| Feedback | Status, progress, loading and result messages |
| Overlays | Content that opens above the page: tooltip, popover, dialog, drawer |
| Navigation and shell | App shell, tabs, breadcrumbs, page header and command palette |
Each component sits in one category. The list lives in apps/docs/src/data/categories.ts; a component without a category stops the docs check.