Toggle group
A set of pressable buttons, single choice like a segmented control, or multiple like a formatting toolbar.
Single choice
<div class="mn-toggle-group" data-mn-toggle="single" aria-label="View">
<button aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></svg> Grid</button>
<button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01"/></svg> List</button>
<button><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg> Chart</button>
</div>Multiple
<div class="mn-toggle-group" data-mn-toggle="multiple" aria-label="Text formatting">
<button aria-label="Bold" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button>
<button aria-label="Italic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5h-5M14 19H9M14 5l-4 14"/></svg></button>
<button aria-label="Underline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/></svg></button>
</div>As a form field (no JS)
<div class="mn-toggle-group mn-toggle-group-block" role="radiogroup" aria-label="Billing period">
<label><input type="radio" name="period" value="monthly" checked> Monthly</label>
<label><input type="radio" name="period" value="yearly"> Yearly</label>
<label><input type="radio" name="period" value="lifetime"> Lifetime</label>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/toggle-group.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-toggle-group | Container. |
| data-mn-toggle="single | multiple" | Button mode, handled by mian.js. |
| mn-toggle-group-block | Stretches to full width. |
Accessibility
- Button mode sets aria-pressed on each button; arrow keys move between them.
- For a form value with no JavaScript, use the label + radio version: it submits with the form and is announced as a radio group.