Browse the docs

PreviousSelect NextCard

Components

Checkbox and switch

Checkbox for choices that apply on submit, switch for settings that apply right away.

Install

npx shadcn@latest add @stardust/checkbox
npx shadcn@latest add @stardust/switch

Examples

Examples are React. The Vue components take the same props and variants; only the template syntax differs.

Usage

Do

Use a switch when the change takes effect immediately.
Use checkboxes inside forms that need a Save button.

Don’t

Don't use a switch inside a form that needs submitting.
Don't write negative labels like 'Don't send emails'.

Accessibility

Wrap or link every control to a label so the label is clickable.