Checkbox

The Checkbox component provides a binary selection control for forms.

Preview

Checked

Unchecked

Disabled

Import

import { Checkbox } from 'meridian';

Props

This component has no custom props. It accepts all standard HTML attributes for its base element.

Usage

Basic

<Checkbox />

With Label

Always pair checkboxes with labels for accessibility:

<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  <Checkbox id="terms" />
  <Label htmlFor="terms">I agree to the terms</Label>
</div>

Controlled

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>

Default Checked

<Checkbox defaultChecked />

Default Checked

Pre-selected option

Disabled

<Checkbox disabled />
<Checkbox disabled defaultChecked />

Disabled States

Disabled

Disabled checked

Checkbox Group

<fieldset>
  <legend>Select options</legend>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Checkbox id="option-1" name="options" />
    <Label htmlFor="option-1">Option 1</Label>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Checkbox id="option-2" name="options" />
    <Label htmlFor="option-2">Option 2</Label>
  </div>
  <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
    <Checkbox id="option-3" name="options" />
    <Label htmlFor="option-3">Option 3</Label>
  </div>
</fieldset>