Checkbox

A single checkbox, or Checkbox.Group for a list of options with a shared selected-values array.

import { Checkbox } from '@jbpark/ui-kit';

<Checkbox checked={checked} onChange={setChecked}>
  Label
</Checkbox>
<Checkbox.Group
  options={[{ label: 'React', value: 'react' }]}
  value={values}
  onChange={setValues}
/>;

Single checkbox

• React
• Vue
• Svelte

Selected: react

Checkbox

Prop	Type	Default
indeterminate	boolean	false
checked	boolean	-
defaultChecked	boolean	false
value	string | number | boolean	-
name	string	-
placement	'left' | 'right'	'left'
disabled	boolean	-
icons	{ checked?: ReactNode; unchecked?: ReactNode; indeterminate?: ReactNode }	-
onChange	(checked: boolean) => void	-

Works both controlled (pass checked + onChange) and uncontrolled (pass defaultChecked, or neither). icons swaps the default check-square icons for custom ones. Also accepts the rest of React.ComponentPropsWithoutRef<'div'> except onChange.

id, aria-label, aria-labelledby, aria-describedby and aria-invalid go to the checkbox control, not the wrapper div, so an external <label htmlFor> names it and aria-describedby can point at an error message. With icons, a <label htmlFor> can't name the focusable icon; use aria-labelledby instead. Without these props, children is the label.

Checkbox.Group

Prop	Type	Default
options	(string | number | boolean | Option)[]	[]
value	OptionValue[]	-
defaultValue	OptionValue[]	[]
orientation	'vertical' | 'horizontal'	'vertical'
placement	'left' | 'right'	'left'
name	string	-
disabled	boolean	-
classNames	{ wrapper?: string; item?: string }	-
onChange	(values: OptionValue[]) => void	-

interface Option {
  label: string;
  value: string | number | boolean;
  disabled?: boolean;
}

A plain string/number/boolean in options is shorthand for { label: String(v), value: v }.

indeterminate displays a mixed state and exposes aria-checked="mixed". It is separate from checked; the caller clears it when handling a change. Activating a mixed checkbox toggles the underlying checked value. Custom icons can supply icons.indeterminate; otherwise a minus-square icon is used.