Checkbox

The Checkbox component provides a toggle input with support for checked, unchecked, and indeterminate states.

Basic Usage

✓ Accept terms

import { Checkbox } from "@paramanu/forms-react"

export default function App() {
  return <Checkbox>Accept terms</Checkbox>
}

<label class="pm-checkbox pm-checkbox--md">
  <input type="checkbox" class="pm-checkbox__input" />
  <span class="pm-checkbox__indicator">&#10003;</span>
  <span class="pm-checkbox__label">Accept terms</span>
</label>

States

✓ Checked ✓ Disabled

import { Checkbox } from "@paramanu/forms-react"

export default function App() {
  return (
    <>
      <Checkbox checked>Checked</Checkbox>
      <Checkbox disabled>Disabled</Checkbox>
      <Checkbox indeterminate>Indeterminate</Checkbox>
    </>
  )
}

<label class="pm-checkbox pm-checkbox--md pm-checkbox--checked">
  <input type="checkbox" class="pm-checkbox__input" checked />
  <span class="pm-checkbox__indicator">&#10003;</span>
  <span class="pm-checkbox__label">Checked</span>
</label>
<label class="pm-checkbox pm-checkbox--md pm-checkbox--disabled">
  <input type="checkbox" class="pm-checkbox__input" disabled />
  <span class="pm-checkbox__indicator">&#10003;</span>
  <span class="pm-checkbox__label">Disabled</span>
</label>

Accessibility

Feature	Detail
`aria-checked`	Set to `"mixed"` for indeterminate state
`aria-invalid`	Applied when `invalid` is true
Keyboard	Space toggles the checkbox

Best Practices

Use checkboxes for independent boolean choices.
Use the indeterminate state for “select all” parent checkboxes.

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Checkbox size
`disabled`	`boolean`	`false`	Disabled state
`invalid`	`boolean`	`false`	Invalid state
`checked`	`boolean`	`false`	Checked state
`indeterminate`	`boolean`	`false`	Indeterminate state

CSS Classes

Class	Description
`pm-checkbox`	Base class
`pm-checkbox__input`	Hidden input
`pm-checkbox__indicator`	Visual indicator
`pm-checkbox__label`	Label text
`pm-checkbox--checked`	Checked state
`pm-checkbox--indeterminate`	Indeterminate state