# Cookie consent · MIAN

A consent notice with equal-weight Accept and Reject, and per-purpose switches, honest by default, dismissible.

- Id: `cookie-consent` · Category: Feedback · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/cookie-consent
- Use for: cookie banner, cookie consent, gdpr consent, privacy choices, tracking consent.

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

## Classes

- `mn-consent`: The notice (a region). Add mn-consent-fixed to pin it to the bottom of the viewport.
- `mn-consent-actions`: Reject and Accept with equal weight, then Customise.
- `mn-consent-options`: A <details> with one switch per purpose; necessary is on and disabled.

## Accessibility

- It is a labelled region (role="region" with aria-label), not a modal: the page stays usable.
- Reject and Accept have the same size and weight; nothing is pre-ticked except strictly necessary storage.
- Buttons with data-mn-dismiss close it; store the choice and do not show it again.

## Examples

### Consent

```html
<section class="mn-consent" role="region" aria-label="Cookie choices">
  <p><strong>Cookies on this site.</strong> We use necessary storage to keep you signed in. With your permission we also measure visits to improve pages. <a class="mn-link" href="#">Privacy notice</a></p>
  <details class="mn-consent-options"><summary>Customise</summary>
    <label class="mn-row"><input class="mn-switch" type="checkbox" role="switch" checked disabled> Necessary: always on</label>
    <label class="mn-row"><input class="mn-switch" type="checkbox" role="switch"> Measurement</label>
    <label class="mn-row"><input class="mn-switch" type="checkbox" role="switch"> Marketing</label>
  </details>
  <div class="mn-consent-actions"><button class="mn-btn mn-btn-outline" type="button" data-mn-dismiss=".mn-consent">Reject all</button><button class="mn-btn" type="button" data-mn-dismiss=".mn-consent">Accept all</button></div>
</section>
```

## Source

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