Segmented control
A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.
Kit parts
Toggle group
The segmented control’s keys, each latching on its own, so any number can be down at once: bold and italic, the columns a table shows, the filters on a log. Every key is a checkbox and posts with the form. A lone toggle is a group of one, and a parting line splits clusters of keys in one slot.
Seats open in 11 days. Want one email that morning?
Anatomy
It is the segmented control with checkboxes in place of radios: the same tray, the same caps, the same latched key below the plate, so every finish and both volumes already draw it. What is new is small. The row may wrap and may stand as a column, a parting line is an engraved cut in the tray’s floor lit on its far lip, and the element keeps one tab stop with a roving tabindex. The checkboxes stay the value, so a framework, a form or a test reads them as ever.
Variants
- Icons, clusters parted
- Words, with lamps
- One toggle
- Small
- A column
- Wraps when narrow
States
- Up
- Hover
- Pressed
- Latched
- Focus
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| aria-label | attribute | Names a key that shows only a glyph or a letter; hide the glyph with aria-hidden. |
| orientation | attribute | On the group. The class also draws the column. |
| value | property | The values that are down, in order. |
| rovingNext(index, key, count, options) | function | Where a key press moves the focus, or -1. Pure. |
| ← → · ↑ ↓ · Home · End · Space · Enter · Tab | key | Move between keys (wrapping); first and last; latch or let go; leave the group. |
Usage notes
Tab into the style keys once, then move with the arrow keys; Space or Enter latches the key in focus, and the sample text follows. The column keys carry lamps, as each one switches a part of the table on. Submit to see what the form posts.
Accessibility
- Each key is a native checkbox, so it is read as “Bold, checkbox, checked” inside “Text style, group”, and it posts with the form with no script.
- With the script the group is one tab stop: the arrow keys move between keys and wrap, Home and End go to the ends, and the focus returns to the last key used. Disabled keys are passed over.
- Space toggles the key in focus, as on any checkbox, and so does Enter, so it never submits the form by accident.
- A latched key sits below the plate and, unless the group is plain, lights its lamp; its state is also in the checkbox, never in the colour alone.
Related parts
Selector
One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
Switch
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
Button group
Keys that belong together set side by side in one slot, like the transport keys of a deck. Each is still its own cap and goes down on its own; only the corners facing a neighbour are tightened, so the row reads as one bank. A split key is one action with the menu of its other ways, two caps in one slot, and a readout can be printed between keys.