# Toggle group · MIAN

A set of pressable buttons, single choice like a segmented control, or multiple like a formatting toolbar.

- Id: `toggle-group` · Category: Actions · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/toggle-group
- Use for: segmented control, view switcher, formatting toolbar, choose one option inline, grid list toggle.
- Alternatives: tabs, radio-card.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Single choice

```html
<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

```html
<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)

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/toggle-group/source