Checkbox

A flexible checkbox component with support for indeterminate states, validation, and group selections. Use checkboxes when users need to select multiple options from a list or toggle individual settings.

Basic Checkbox

Accept terms and conditions

Checked by Default

Remember me

With Helper Text

Enable two-factor authentication

Add an extra layer of security to your account

Indeterminate State

Select all items

Some items are selected

Error State

I agree to the privacy policy

You must accept the privacy policy to continue

Disabled States

Disabled unchecked

Disabled checked

Group of Checkboxes

Email Preferences

Newsletter

Notifications

Get notified about important events

Product Updates

Monthly product updates and announcements

Marketing

Promotional offers and discounts

Props

Name	Type	Default	Description
`label*`	`string`	-	Checkbox label text
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Uncontrolled default checked state
`indeterminate`	`boolean`	`false`	Whether checkbox is in indeterminate state
`disabled`	`boolean`	`false`	Whether checkbox is disabled
`error`	`string`	-	Error message to display
`helperText`	`string`	-	Helper text below checkbox
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	-	Change event handler

Usage Guidelines

When to use

•When users need to select multiple options from a list
•For binary choices that can be toggled on/off
•In forms where users need to agree to terms or enable features
•For filtering or configuration settings

Best practices

•Use clear, descriptive labels that explain what will happen when checked
•Group related checkboxes together with proper spacing
•Use helper text to provide additional context when needed
•Use indeterminate state for "select all" scenarios when some items are selected
•Display error messages clearly when validation fails
•Keep labels short and scannable - avoid lengthy text

Accessibility

•Keyboard accessible (Tab for focus, Space to toggle)
•ARIA attributes: aria-checked, aria-invalid, aria-describedby
•Indeterminate state uses aria-checked="mixed"
•Error messages announced with aria-live
•Focus indicators visible for keyboard navigation
•Label properly associated with checkbox input
•Disabled state indicated with aria-disabled

Do's and Don'ts

✓ Do

•Use clear, affirmative labels that describe what happens when checked
•Group related checkboxes together logically
•Use helper text to provide additional context or explanation
•Show validation errors immediately when applicable
•Use indeterminate state for parent checkboxes when some children are selected

Enable notifications

Receive updates about your account

Enable email digest

Weekly summary of your activity

✗ Don't

•Don't use negative labels like "Don't send notifications"
•Don't use checkboxes for mutually exclusive options - use radio buttons
•Don't hide important information in helper text alone
•Don't use checkboxes to trigger immediate actions - use buttons or switches
•Don't make labels too long or verbose

Don't send me notifications

This is a very long checkbox label that contains too much information and makes it difficult for users to quickly scan and understand what this option does