Checkbox

A toggle control that allows users to select one or more options.

Basic Usage

Accept terms and conditions

Variants

PrimarySecondary

Indeterminate

Select all

Disabled

Disabled uncheckedDisabled checked

Props

Prop	Type	Default	Description
checked	boolean	-	Whether the checkbox is checked (controlled)
defaultChecked	boolean	-	Initial checked state (uncontrolled)
indeterminate	boolean	false	Whether the checkbox shows an indeterminate state
onChange	(e: ChangeEvent) => void	-	Change handler
variant	'primary' | 'secondary'	'primary'	Color variant
label	string	-	Text label
required	boolean	false	Whether the field is required (shows red asterisk)
disabled	boolean	false	Whether the checkbox is disabled
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles

Also accepts all standard <input> HTML attributes (except type and size).

Mobile considerations

• The clickable area extends to include the label so the 44px tap target is met even with size="sm" styles.
• Check / uncheck animation respects prefers-reduced-motion: reduce.
• Group multiple Checkboxes inside a list with at least --tui-space-3 vertical gap so finger taps don't miss neighbors.