ActionBrowse action components
Toggle group
Single-select segmented buttons for view modes, filter dimensions, or unit pickers.
Live preview
Usage
Adapters:React stableVue stable
index.html
<div class="lm-toggle-group" role="radiogroup">
<button class="lm-toggle-group-item" aria-checked="false">Compact</button>
<button class="lm-toggle-group-item" aria-pressed="true" aria-checked="true">Comfortable</button>
<button class="lm-toggle-group-item" aria-checked="false">Spacious</button>
</div>CSS classes (2)
| Class | Description |
|---|---|
lm-toggle-group | Wrapper with shared border |
lm-toggle-group-item | Each pill; aria-pressed='true' = selected |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Active item value |
onValueChange | (value: string) => void | — | Selection callback |
Accessibility
- Use role='radiogroup' and aria-checked on items.
- Wire arrow keys for focus traversal.
Spotted something wrong? Edit this entry on GitHub.