# Bulk actions · MIAN

A bar that appears when rows are selected, the count, actions for the selection, and a way out, with select-all.

- Id: `bulk-actions` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/bulk-actions
- Use for: bulk actions, select rows, batch edit, archive selected, selection toolbar.

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-bulk`: The scope: wraps the table (or list) and the bar. Add data-mn-bulk.
- `mn-bulkbar`: The bar; hidden until something is selected.
- `data-mn-bulk-all`: On the header checkbox: selects every row; shows indeterminate for some.
- `data-mn-bulk-count`: Where the number of selected rows is written.

## Accessibility

- The count is announced (the bar is role="status" for its first line) when the selection changes.
- The header checkbox is labelled “Select all” and reports mixed selection as indeterminate.
- Destructive bulk actions name the number (“Delete 3”) and use a confirm dialog or an undo toast.

## Examples

### Selectable table

```html
<div class="mn-bulk" data-mn-bulk>
  <div class="mn-bulkbar" hidden><p role="status"><strong data-mn-bulk-count>0</strong> selected</p><div class="mn-row"><button class="mn-btn mn-btn-sm mn-btn-outline" type="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="M12 4v12M7 11l5 5 5-5"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg> Export</button><button class="mn-btn mn-btn-sm mn-btn-outline" type="button">Mark paid</button><button class="mn-btn mn-btn-sm mn-btn-outline mn-danger" type="button">Void</button></div></div>
  <div class="mn-table-wrap"><table class="mn-table mn-table-compact">
    <thead><tr><th scope="col" style="width:2.5rem"><input class="mn-checkbox" type="checkbox" data-mn-bulk-all aria-label="Select all invoices"></th><th scope="col">Invoice</th><th scope="col">Customer</th><th scope="col" class="mn-num">Amount</th></tr></thead>
    <tbody>
      <tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2041"></td><td>INV-2041</td><td>Halden & Co</td><td class="mn-num">€1,240.00</td></tr>
      <tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2040"></td><td>INV-2040</td><td>Orbital GmbH</td><td class="mn-num">€380.50</td></tr>
      <tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2039"></td><td>INV-2039</td><td>Kestrel Ltd</td><td class="mn-num">€4,900.00</td></tr>
      <tr><td><input class="mn-checkbox" type="checkbox" aria-label="Select INV-2038"></td><td>INV-2038</td><td>Marrow SRL</td><td class="mn-num">€96.00</td></tr>
    </tbody></table></div>
</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/bulk-actions/source