Checkbox · Enma

Live demo

Warm-up doneStretch for five minutesLog body weight

How to use it

A choice inside a form or list that is confirmed later, or a checklist item.

Provide label, and checked/onChange or defaultChecked.
The box border is --e-line-strong; checked fills with --e-primary.

Don't: use it for instant settings (use Switch).

In every theme

Follows the mode picked in the header.

Code

React

import { Checkbox } from 'enma/react';

<Checkbox label="Warm-up done" defaultChecked />

Plain HTML

<label class="e-check">
  <input class="e-check__input" type="checkbox">
  <span class="e-check__box" aria-hidden="true"><!-- check icon --></span>
  <span>Warm-up done</span>
</label>

Props

`CheckboxProps`

Also accepts every attribute of React.InputHTMLAttributes<HTMLInputElement>.

Props of CheckboxProps
Prop	Type	Default	Description
`label`	React.ReactNode