# Checkbox · MIAN

Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role.

- Id: `checkbox` · Category: Forms · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/checkbox
- Use for: checkbox, agree to terms, multiple choice, select all rows.

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-checkbox`: On an <input type="checkbox">.
- `mn-check`: A label that lays out a control with its text.

## Accessibility

- It is a native checkbox, so Space toggles and state is announced. Wrap it in a <label> so the text is clickable.
- Set indeterminate from script: el.indeterminate = true.

## Examples

### Basic

```html
<div class="mn-stack">
  <label class="mn-check"><input class="mn-checkbox" type="checkbox" checked> Remember me</label>
  <label class="mn-check"><input class="mn-checkbox" type="checkbox"> Subscribe to the newsletter</label>
  <label class="mn-check"><input class="mn-checkbox" type="checkbox" disabled> Disabled</label>
</div>
```

### With description

```html
<label class="mn-check">
  <input class="mn-checkbox" type="checkbox" checked>
  <span><span>Accept terms</span><p class="mn-hint">You agree to our Terms of Service and Privacy Policy.</p></span>
</label>
```

### Colours

```html
<input class="mn-checkbox mn-accent" type="checkbox" checked aria-label="Accent">
<input class="mn-checkbox mn-success" type="checkbox" checked aria-label="Success">
<input class="mn-checkbox mn-danger" type="checkbox" checked aria-label="Danger">
<input class="mn-checkbox" type="checkbox" aria-label="Indeterminate" data-indeterminate>
<script>document.querySelectorAll('[data-indeterminate]').forEach(c => c.indeterminate = true)</script>
```

## Source

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