Checkbox

Form
v1.0.0
stable

Checkbox component with checked and disabled states.

Preview

npx inam-ui add checkbox

Usage Examples

Controlled Checkbox

Manage checkbox state with React state

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

<Checkbox
  label="Accept terms"
  checked={checked}
  onChange={setChecked}
/>

Accessibility

Keyboard Navigation

  • Space - Toggle checked/unchecked
  • Tab - Move focus

ARIA Labels

  • aria-checked
  • aria-disabled

Screen Reader

Announced as 'checkbox' with label and checked state.

Props

NameTypeDefaultDescription
labelstringLabel text for the checkbox.
checkedbooleanfalseWhether the checkbox is checked.
disabledbooleanfalseWhether the checkbox is disabled.
onChange(checked: boolean) => voidCallback when checkbox state changes.

Related Components