Checkbox

A control that allows the user to toggle between checked and unchecked states.

Checkbox

A control that allows the user to toggle between checked and unchecked states.

Accept terms and conditions

Installation

pnpm dlx vibe-ui-kit@latest add checkbox label

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: label

Variations

Explore the standard interactive states of the Checkbox component.

Unchecked

Checked

Disabled Off

Disabled On

Examples

Form Checklist

An interactive list group mapping checkboxes to multi-row selection inputs with support for descriptions.

Notification Preferences

Manage how you receive alerts and newsletters.

Weekly Newsletters

Get a digest of new features, articles, and community updates every Tuesday.

Promotional Emails

Receive updates on discounts, sales, and special offers from our partners.

Security & Safety Alerts

Get instant alerts about login attempts, security patches, and critical updates.

Card Selector

A responsive grid selector where active items check their matching checkboxes and show a highlighted border.

Hobby Plan

For personal projects

$12 / month

Startup Pro

For small teams & scale

$49 / month

Props

Prop	Type	Default	Description
checked	boolean \| 'indeterminate'	false	The controlled checked state of the checkbox.
defaultChecked	boolean	false	The initial checked state when rendering uncontrolled.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	-	Event handler called when the checked state changes.
disabled	boolean	false	When true, prevents user interaction.

PreviousCollapsible

Next Command

Contributors

Jenish Sabhadiya

Theme Customizer

Primary Theme Accent

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}

Changes apply instantly to this documentation workspace.

Checkbox | Vibe UI