Components
Every component the library exports, grouped by what it is for. Each summary says when to reach for it and, where two components are easy to confuse, which one you probably want instead.
The list is generated from the components themselves — the same @summary and @category doc comments that produce the catalog @forte-ui/react ships for coding agents, which is why nothing here can fall behind the package.
Actions
- The clickable action control — submit, open, trigger; for a pressed state that sticks, use Toggle, and for pure navigation use a link.
- Fuses related buttons into one visual object with shared borders; purely presentational — for a single-choice set with state, use ToggleGroup.
- A ready-made light/dark mode button — pair with ThemeScript to avoid a wrong-theme flash at first paint; useTheme drives custom toggles.
- A two-state button that stays pressed — bold in a text editor; for an on/off setting that reads as a control, use Switch.
- A set of Toggles sharing one value, single or multiple choice — the view-switcher pattern; for form data use RadioGroup or CheckboxGroup.
- A strip of related controls that behaves as one tab stop, arrow keys moving between them — the row above an editor or table.
Forms
- An inline month grid for picking one day, several days, or a range; for a form field that opens a calendar on demand, use DatePicker.
- An independent yes/no option with an optional mixed state; for one-of-many use RadioGroup, for a setting that applies immediately use Switch.
- One array value shared by several Checkboxes, with an optional parent checkbox that summarises and toggles the lot.
- Full color selection — saturation/brightness canvas, hue and alpha rails, preset swatches, and a text field that speaks four CSS notations.
- A text input combined with a filterable option list — the Select to reach for once the list is long enough to need typing.
- A form field that opens a Calendar in a popover — the input-shaped way to pick a day or a range.
- Wires one control to its label, description and error message, and owns the validation state they all read — the wrapper every form control sits in.
- Groups related Fields under one legend, without the browser's default fieldset chrome.
- A <form> that aggregates every Field's validity, blocks submission until they pass, and routes server errors back to fields by name.
- The single-line text field; wrap in Field for label and error wiring, in InputGroup for inner icons and buttons; for numbers use NumberField.
- Puts icons, prefixes, buttons and counters inside a text field's boundary instead of bolted onto it.
- A text input that knows it holds a number — parses, formats, steps, clamps, and scrubs by dragging; use over Input whenever the value is numeric.
- A row of single-character slots holding one verification code — one value, one tab stop, and paste that lands where you expect.
- One option in a mutually exclusive set — always rendered inside a RadioGroup.
- A single choice among a few options that all stay visible; once the list grows past a handful, use Select.
Documented with Radio
- A dropdown for choosing one option from a closed list; once the list is long enough to need typing to navigate, use Combobox.
- Picks a numeric value or range by feel along a track; when the exact number matters more than the feel, use NumberField.
- An on/off control whose change applies immediately — no submit step; for a value collected and submitted by a form, use Checkbox.
- A multi-line text control sized in rows, with an optional ceiling and CSS-driven auto-growth.
Overlays
- A modal for decisions that must be answered — it cannot be dismissed by clicking outside; the shape for destructive confirms. Shares Dialog's parts (see Dialog's props.json keys) under AlertDialog.*.
Documented with Dialog
- A Menu that opens at the pointer on right-click or long-press over a region of the page rather than off a button.
- A modal surface that takes focus until dismissed; for confirmations that must be answered use AlertDialog, for edge-anchored panels use Drawer.
- A panel that slides in from any screen edge, with drag-to-dismiss and snap points; for a centered modal use Dialog.
- A button-opened list of commands with checkable items, submenus and shortcut hints; for choosing a form value use Select instead.
- A row of Menus that behave as one strip — the application menu bar.
- An anchored non-modal surface for content the user reads or acts on — tabbable and touch-reachable; for a hover-only hint use Tooltip.
- A rich preview of a link's destination revealed by resting on it — supplementary by design, never the only route to what it shows.
- Short transient messages raised imperatively from anywhere via useToast; for a persistent in-page message use Alert.
- A short label shown on hover or focus naming a control — never the only carrier of essential content; for interactive content use Popover.
Navigation
- The bar across the top of a screen — leading controls, a title and trailing actions, pinned, elevating or hiding on scroll; for a one-tab-stop strip of controls inside it, use Toolbar.
- The trail of ancestors above the current page, with automatic separators and a collapsible middle for narrow screens.
- Page controls for a long set — previous, next, numbered pages and an ellipsis; for moving through steps of one task use Tabs, and for a position within a document use Breadcrumb.
- A numbered sequence of steps and the user's position in it — a wizard header or an order's progress; for a single fraction done, use Progress instead.
- Switches between panels of related content in the same place, with a sliding active indicator.
Content & layout
- A stack of headings that each expand a panel, one or several open at a time; for a single independent disclosure, use Collapsible.
- A persistent in-page message about the page's state — the static counterpart to Toast, which is transient and floats above the page.
- A decorative light traveling a container's border; for motion that reports progress or a wait, use Spinner or Shimmer instead.
- Reserves a fixed-ratio box from first paint so late-arriving media drops into already-reserved space instead of shifting the layout.
- A picture of a person or thing with a sensible fallback when the image is missing or slow, plus an optional status badge and grouping.
- A small label for status, counts and categories.
- The bordered grouping surface — header, title, action, content, footer and media slots for everything from settings sections to pricing tiers.
- A strip of slides shown one (or a few) at a time, moved by drag, by buttons or on a timer; for panels chosen by name rather than by position use Tabs, and for a list that merely scrolls use ScrollArea.
- A single trigger and the region it reveals; for a stack of exclusive disclosures, use Accordion.
- A keyboard key cap for shortcut hints — works in prose, tooltips, menu items and buttons.
- Reorder one list's items by dragging or with the keyboard — vertical or horizontal, nestable, announced; the order stays in your state. To sort a table by a column, use Table's sortable header instead.
- Panels the user re-proportions by dragging the divider between them — keyboard operable, constrainable, and persistable.
- Plays a one-shot entrance — fade, rise, scale — on whatever it wraps, the first time that content reaches the screen; a popup or panel animates its own enter and needs none of this.
- A scroll container with overlay scrollbars that look the same on every platform, plus scroll-position edge fades.
- A rule between things, horizontal or vertical, optionally with a label set into the line; announced to assistive technology unless marked decorative.
- Rows and columns of data on a real `<table>` — variants, sizes, striping, selection tint, numeric columns, sortable headers and a sticky header; the data, sorting and selection state stay with the consumer.
Feedback
- A linear progress bar — determinate when passed a number, indeterminate when passed null; the circular form is ProgressCircle.
- The circular Progress — a ring for tight spaces; same determinate/indeterminate contract as the bar.
Documented with Progress
- An animated highlight sweeping through text that is itself the status message; for a placeholder standing in for content, use Skeleton.
- A loading placeholder that occupies exactly the space the real content will, so the page doesn't jump when data lands.
- An indeterminate busy indicator for waits with no measurable progress; when progress is known, use Progress.