# Color check

> Checkboxes and radios styled as color swatches, for picking a color in a form.

Checkboxes and radios styled as color swatches, plus the native color picker input.

Source: https://docs.tabler.io/ui/forms/color-check

---

A color check is a checkbox or a radio drawn as a color swatch. The swatch takes any of the `bg-*` classes from the [color palette](/ui/base/colors).

```html
<label class="form-colorinput">
  <input name="..." type="radio" value="..." class="form-colorinput-input" />
  <span class="form-colorinput-color bg-lime"></span>
</label>
```

With checkboxes, several colors can be picked at once:

```html
<div class="mb-3">
  <div class="form-label">Color Input</div>
  <fieldset>
    <legend class="visually-hidden">Color Input</legend>
    <div class="row g-2">
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="dark" class="form-colorinput-input" aria-label="dark">
          <span class="form-colorinput-color bg-dark"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput form-colorinput-light">
          <input name="color" type="checkbox" value="white" class="form-colorinput-input" checked aria-label="white">
          <span class="form-colorinput-color bg-white"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="blue" class="form-colorinput-input" aria-label="blue">
          <span class="form-colorinput-color bg-blue"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="azure" class="form-colorinput-input" aria-label="azure">
          <span class="form-colorinput-color bg-azure"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="indigo" class="form-colorinput-input" aria-label="indigo">
          <span class="form-colorinput-color bg-indigo"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="purple" class="form-colorinput-input" aria-label="purple">
          <span class="form-colorinput-color bg-purple"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="pink" class="form-colorinput-input" aria-label="pink">
          <span class="form-colorinput-color bg-pink"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="red" class="form-colorinput-input" aria-label="red">
          <span class="form-colorinput-color bg-red"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="orange" class="form-colorinput-input" aria-label="orange">
          <span class="form-colorinput-color bg-orange"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="yellow" class="form-colorinput-input" aria-label="yellow">
          <span class="form-colorinput-color bg-yellow"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="lime" class="form-colorinput-input" aria-label="lime">
          <span class="form-colorinput-color bg-lime"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color" type="checkbox" value="green" class="form-colorinput-input" aria-label="green">
          <span class="form-colorinput-color bg-green"></span>
        </label>
      </div>
    </div>
  </fieldset>
</div>
```

Use the radio type when only one color can be picked:

```html
<div class="mb-3">
  <div class="form-label">Color Input</div>
  <fieldset>
    <legend class="visually-hidden">Color Input</legend>
    <div class="row g-2">
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" aria-label="dark">
          <span class="form-colorinput-color bg-dark rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput form-colorinput-light">
          <input name="color-rounded" type="radio" value="white" class="form-colorinput-input" checked aria-label="white">
          <span class="form-colorinput-color bg-white rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" aria-label="blue">
          <span class="form-colorinput-color bg-blue rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" aria-label="azure">
          <span class="form-colorinput-color bg-azure rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" aria-label="indigo">
          <span class="form-colorinput-color bg-indigo rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" aria-label="purple">
          <span class="form-colorinput-color bg-purple rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" aria-label="pink">
          <span class="form-colorinput-color bg-pink rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" aria-label="red">
          <span class="form-colorinput-color bg-red rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" aria-label="orange">
          <span class="form-colorinput-color bg-orange rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" aria-label="yellow">
          <span class="form-colorinput-color bg-yellow rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" aria-label="lime">
          <span class="form-colorinput-color bg-lime rounded-circle"></span>
        </label>
      </div>
      <div class="col-auto">
        <label class="form-colorinput">
          <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" aria-label="green">
          <span class="form-colorinput-color bg-green rounded-circle"></span>
        </label>
      </div>
    </div>
  </fieldset>
</div>
```

## Input color picker

For a free choice of color, use the native `color` input. Tabler styles it to match the other form controls.

```html
<div class="mb-3">
  <label class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color" />
</div>
```

## Accessibility

- A color swatch has no name. Put the color in text inside a `visually-hidden` span, or use `aria-label` on the input, so the option is not announced as just "radio".
- Colour on its own cannot be the only way to tell options apart. Keep a visible mark for the selected one - Tabler draws a checkmark inside the swatch.
- Wrap the set in a `fieldset` with a `legend`, so the group has a name. See [fieldsets](/ui/forms/fieldset).
- Keep the real `input` in the markup. It is what makes the arrow keys, the space bar and the checked state work.
- Do not use a color picker as the only way to choose something meaningful, such as a category. Offer the name as well.