# Checkbox

A box to tick: yes or no for one thing, or several choices in a group.

## Playground

```html
<label class="feitio-choice"><input type="checkbox">Notify on Discord</label>
```

## When to use

-   To pick none, one or several options from a list.
-   On its own, to agree to something.

## When not to use

-   **Mutually exclusive options:** Radios.
-   **Turning a setting on and off:** Switch.

## Examples

### A group

Title and hint together (`space-1`), the options right below (`space-3`), and `space-2` between options. The tick is in ink: orange stays for the main action.

Show code

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Avisar por</legend>
  <span class="feitio-hint">Marque quantos quiser</span>
  <div class="feitio-choices">
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="discord" checked>Discord</label>
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="email">E-mail</label>
  </div>
</fieldset>
```

## States

Unticked

Notify a day before

Ticked

Notify a day before

Group error

Notify by

DiscordE-mail

Pick at least one

Disabled

WhatsApp (soon)

## Do and don’t

Do

Notify a day beforeNotify an hour before

Box and text clickable together, and the tick in ink.

Don’t

Notify a day beforeNotify an hour before

Orange ticks compete with the save button for the orange.

## Accessibility

-   The whole text is clickable, not just the box.
-   In a group, the Fieldset gives the title; the group error appears once, below the options.

## Attributes

Attribute

Values

What for

`class="feitio-choices"`

around the options

`space-2` between options.

`class="feitio-choice"`

on the `<label>`

Box and text clickable together.

`checked`, `disabled`

—

Ticked; disabled.

`aria-invalid="true"`

on the fieldset

Group error, below the options.