Components
32 elements
Every one is built on a native element, or an ARIA role when the platform doesn't have one. Each page shows a styled example next to the headless markup, so you can see what's possible — and what's yours to decide.
Overlays
- Alert <slab-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
<slab-dialog>
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 <slab-drawer> A non-modal dialog for a side panel. The page behind it stays usable.
- Popover <slab-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 <slab-toast> A polite heads-up that something just happened. It lives on the page up front, so screen readers actually hear it.
- Tooltip <slab-tooltip> A short description that shows up beside an element on hover and focus.
Disclosure
Navigation
- Breadcrumb <slab-breadcrumb> The trail of links to the current page, as an ordered list in a navigation landmark. Separators are yours to add.
- Menu <slab-menu> A button that opens a list of actions. It's the APG's menu button, keyboard and all.
- Pagination <slab-pagination> Buttons for moving between pages, with an ellipsis for the ones it doesn't show.
- Tabs <slab-tabs> Tabs and their Panels, with one Panel showing at a time.
- Toolbar <slab-toolbar> A group of controls that Tab reaches once, with the arrow keys to move between them.
- Tree <slab-tree> A nested list of items that expand and collapse, to pick one or more from.
Selection
- Combobox <slab-combobox> A text input that filters a list of Options as you type.
- Listbox <slab-listbox> A list of Options to pick one or more from, right on the page instead of in a popup.
-
Select
<slab-select>
A button that opens a list of Options to pick one or more from. It submits just like a
<select>.
Form
- Checkbox <slab-checkbox> A checkbox built on the native one, with an indeterminate state and real form validation.
- Checkbox Group <slab-checkbox-group> A set of Checkboxes with one label, one value, and one validity between them.
- Date Field <slab-date-field> A date field built on the native date input. The browser brings its own picker.
- Field <slab-field> A label wired up to a control of your own. Bring any input, select, or element you like.
- File Drop <slab-file-drop> A file input you can also drop files onto. One list of files, either way.
-
Form
<slab-form>
A
<form>that Slab's controls submit, reset, and validate with — just like native ones. - Number <slab-number> A number field built on the native one, with stepping and validation included.
- Radio Group <slab-radio-group> A set of Radios with one label, one value, and exactly one checked.
- Slider <slab-slider> A single-thumb slider built on the native range input.
- Switch <slab-switch> An on and off toggle built on a native checkbox with the switch role.
- Text Field <slab-text-field> A single-line text field built on the native input, validation and all.
- Textarea <slab-textarea> A multi-line text field built on the native textarea.
Data
- Calendar <slab-calendar> 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 <slab-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 <slab-progress> How far along a task is, or just that it's happening when you don't know yet. That's your spinner, too.