# Components

> All of Slab's headless Web Components. Every one is built on a native element, or an ARIA role when the platform doesn't have one.

## Overlays

- [Alert](components/alert.md): `<slab-alert>`, built on `[role=alert]`. An inline message that gets announced when it shows up. Put it on the page empty, then fill it in when there's something to say.
- [Dialog](components/dialog.md): `<slab-dialog>`, built on `<dialog> (modal)`. A modal dialog built on the native `<dialog>`. Focus stays inside, Escape closes it, and the rest of the page goes inert — the platform does the heavy lifting.
- [Drawer](components/drawer.md): `<slab-drawer>`, built on `<dialog> (non-modal)`. A non-modal dialog for a side panel. The page behind it stays usable.
- [Popover](components/popover.md): `<slab-popover>`, built on `[popover]`. Content that pops up beside the element that opened it, in the top layer, and gets dismissed the way a native popover does.
- [Toast](components/toast.md): `<slab-toast>`, built on `[role=status]`. A polite heads-up that something just happened. It lives on the page up front, so screen readers actually hear it.
- [Tooltip](components/tooltip.md): `<slab-tooltip>`, built on `[role=tooltip]`. A short description that shows up beside an element on hover and focus.

## Disclosure

- [Accordion](components/accordion.md): `<slab-accordion>`, built on `group of <details>`. A group of Disclosures where opening one can close the others. Great for FAQs.
- [Disclosure](components/disclosure.md): `<slab-disclosure>`, built on `<details>`. Show and hide content behind a summary. It's a native `<details>` with a few extras.

## Navigation

- [Breadcrumb](components/breadcrumb.md): `<slab-breadcrumb>`, built on `<nav> + <ol>`. The trail of links to the current page, as an ordered list in a navigation landmark. Separators are yours to add.
- [Menu](components/menu.md): `<slab-menu>`, built on `[role=menu] + [popover]`. A button that opens a list of actions. It's the APG's menu button, keyboard and all.
- [Pagination](components/pagination.md): `<slab-pagination>`, built on `<nav> + <button>s`. Buttons for moving between pages, with an ellipsis for the ones it doesn't show.
- [Tabs](components/tabs.md): `<slab-tabs>`, built on `[role=tablist]`. Tabs and their Panels, with one Panel showing at a time.
- [Toolbar](components/toolbar.md): `<slab-toolbar>`, built on `[role=toolbar]`. A group of controls that Tab reaches once, with the arrow keys to move between them.
- [Tree](components/tree.md): `<slab-tree>`, built on `[role=tree]`. A nested list of items that expand and collapse, to pick one or more from.

## Selection

- [Combobox](components/combobox.md): `<slab-combobox>`, built on `<input role=combobox>`. A text input that filters a list of Options as you type.
- [Listbox](components/listbox.md): `<slab-listbox>`, built on `[role=listbox]`. A list of Options to pick one or more from, right on the page instead of in a popup.
- [Select](components/select.md): `<slab-select>`, built on `[role=combobox] + [role=listbox]`. A button that opens a list of Options to pick one or more from. It submits just like a `<select>`.

## Form

- [Checkbox](components/checkbox.md): `<slab-checkbox>`, built on `<input type=checkbox>`. A checkbox built on the native one, with an indeterminate state and real form validation.
- [Checkbox Group](components/checkbox-group.md): `<slab-checkbox-group>`, built on `[role=group]`. A set of Checkboxes with one label, one value, and one validity between them.
- [Date Field](components/date-field.md): `<slab-date-field>`, built on `<input type=date>`. A date field built on the native date input. The browser brings its own picker.
- [Field](components/field.md): `<slab-field>`, built on `<label>`. A label wired up to a control of your own. Bring any input, select, or element you like.
- [File Drop](components/file-drop.md): `<slab-file-drop>`, built on `<input type=file>`. A file input you can also drop files onto. One list of files, either way.
- [Form](components/form.md): `<slab-form>`, built on `<form>`. A `<form>` that Slab's controls submit, reset, and validate with — just like native ones.
- [Number](components/number.md): `<slab-number>`, built on `<input type=number>`. A number field built on the native one, with stepping and validation included.
- [Radio Group](components/radio-group.md): `<slab-radio-group>`, built on `[role=radiogroup]`. A set of Radios with one label, one value, and exactly one checked.
- [Slider](components/slider.md): `<slab-slider>`, built on `<input type=range>`. A single-thumb slider built on the native range input.
- [Switch](components/switch.md): `<slab-switch>`, built on `<input type=checkbox role=switch>`. An on and off toggle built on a native checkbox with the switch role.
- [Text Field](components/text-field.md): `<slab-text-field>`, built on `<input>`. A single-line text field built on the native input, validation and all.
- [Textarea](components/textarea.md): `<slab-textarea>`, built on `<textarea>`. A multi-line text field built on the native textarea.

## Data

- [Calendar](components/calendar.md): `<slab-calendar>`, built on `<table role=grid>`. A month of days to pick from. It's the grid from the APG's date picker, with all the keyboard support you'd expect.
- [Meter](components/meter.md): `<slab-meter>`, built on `<meter>`. A measurement in a known range, like disk usage. It tells you which region the value's in, so your design can show it.
- [Progress](components/progress.md): `<slab-progress>`, built on `<progress>`. How far along a task is, or just that it's happening when you don't know yet. That's your spinner, too.