Checkbox

A binary toggle for boolean values in forms.

import { ... } from '@corndev/ui'

Controlled — currently uncheckedUncontrolled (starts checked)DisabledError state

HTML

No JavaScript required — these classes are the whole component.

<label>
  <input type="checkbox" class="corn-checkbox" data-size="md" />
  Remember me
</label>

Classes

Class
`.corn-checkbox`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`
`data-error`	`present or absent`

Vanilla JS

Optional. createCheckbox only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createCheckbox } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createCheckbox(el, { /* options */ });

Options

Option	Type	Default
`disabled`	`boolean`	`false`
`error`	`boolean`	`false`
`size`	`'sm'\|'md'\|'lg'`	`'md'`

React

Checkbox — from @corndev/ui-react.

The props are the same as the options above, plus className.

Default

Accept terms and conditions

<Label><Checkbox /> Accept terms and conditions</Label>

Sizes

<Checkbox size="sm" aria-label="Small" />
<Checkbox size="md" aria-label="Medium" />
<Checkbox size="lg" aria-label="Large" />

Checked

<Label><Checkbox defaultChecked /> Subscribe</Label>

Error state

<Label><Checkbox error /> Accept terms and conditions</Label>

Disabled

<Label><Checkbox disabled /> Unavailable option</Label>

With a label

Wrap the checkbox in Label. It renders a real <label> whenever it wraps a form control, so clicking the text toggles the box and screen readers announce the text as its name:

<Label>
  <Checkbox /> Accept terms and conditions
</Label>