Forms

Checkbox

An accessible checkbox component with support for labels, descriptions, and indeterminate state. Essential for consent forms, preferences, and eligibility selections in healthcare applications.

Basic Usage

Simple checkboxes for consent forms and user preferences. Always provide clear, descriptive labels.

I consent to HIPAA-compliant data sharing

I have read and agree to the privacy policy

I would like to receive health tips and updates

With Description

Use descriptions to provide additional context about what the checkbox means. This is especially important for legal and medical consent forms.

Authorize emergency contact access Allow designated emergency contacts to access your medical information in case of emergency

Insurance information verified Patient's insurance coverage has been confirmed and is active

Receive lab results via email Lab results will be sent to your registered email address within 24-48 hours

Indeterminate State

Use indeterminate state when some but not all items in a group are selected. Common in eligibility checklists and multi-select scenarios.

Select all eligibility criteria

Age 18 or older

Valid insurance coverage

Completed intake forms

Disabled State

Disable checkboxes when options are not available or have already been set. Provide context about why the option is disabled.

Enable automatic prescription refills This option is only available for maintenance medications

Consent to telemedicine services Telemedicine consent has been completed and cannot be modified

Share data with research institutions

Validation

Use the error prop to display validation messages. Use validateOnMount to show errors immediately.

I acknowledge that I have read the terms and conditions

Accept data processing agreement (validateOnMount) Required for form submission - check to clear error

This field is required

Sizes

Choose the appropriate size based on context. Use larger checkboxes for important consent forms and smaller ones for compact lists.

Small checkbox (compact lists)

Medium checkbox (default, standard forms)

Large checkbox (important consent forms)

Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the checkbox
`name`	`string`	—	Form field name
`value`	`string`	—	Value attribute for form submission
`label`	`string`	—	Label text for the checkbox (required)
`checked`	`boolean`	false	Whether the checkbox is checked
`description`	`string`	—	Description text below the label
`required`	`boolean`	false	Whether the checkbox is required
`disabled`	`boolean`	false	Whether the checkbox is disabled
`error`	`string`	—	Error message to display
`indeterminate`	`boolean`	false	Indeterminate state (partially checked)
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size of the checkbox
`class`	`string`	—	Additional CSS classes
`onchange`	`(event: Event) => void`	—	Change handler
`testId`	`string`	—	Test ID for e2e testing (Playwright, Cypress)
`validateOnMount`	`boolean`	false	Show validation state immediately without waiting for interaction

Healthcare Best Practices

• Always use required prop for HIPAA consent checkboxes and other legally required acknowledgments
• Provide clear descriptions for consent forms explaining what the patient is agreeing to
• Use error prop to display validation messages for required checkboxes before form submission
• Use indeterminate state for "select all" functionality in eligibility checklists and multi-step forms
• Disable checkboxes that have already been set or are not applicable, but provide context via descriptions
• Ensure all consent checkboxes are clearly labeled and cannot be pre-checked (must be explicitly opted-in)
• Use larger sizes for critical consent forms to ensure they are easily readable and accessible
• Always validate required checkboxes on the server side, not just client side