Checkbox

Molecule

Label + checkbox + opsiyonel hint / hata mesajı. aria-describedby bağlantısı kurulmuş, error durumunda border-error uygulanır.

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)

Navigation