Checkbox

Molecule

Label + checkbox + optional hint / error message. aria-describedby is wired up and border-error is applied on the error state.

Props EditorInteractive

I agree to the Terms of Service

Label

Checked

Hint

Error

Disabled

<Checkbox id="accept" label="I agree to the Terms of Service" onChange={handleChange} />

Preview

I agree to the Terms of Service

Code

<Checkbox id="accept" label="I agree to the Terms of Service" />

Preview

Subscribe to newsletter

We send weekly updates, no spam.

Code

<Checkbox id="newsletter" label="Subscribe to newsletter" hint="We send weekly updates, no spam." />

Preview

I agree to the Terms of Service

You must accept the terms.

Code

<Checkbox id="accept" label="I agree to the Terms of Service" error="You must accept the terms." />

Preview

Checked and disabled

Code

<Checkbox id="accept" label="Checked and disabled" defaultChecked disabled />

Preview

Select all

Option A

Option B

Option C

Code

// Set indeterminate prop to show mixed state:
<Checkbox id="all" label="Select all" checked={allChecked} indeterminate={someChecked} onChange={toggleAll} />

Checkbox

Default

With hint

Error

Disabled

Indeterminate (select all)