PreviewFeatures
Three states: checked, unchecked, and indeterminate
Built with Radix UI Checkbox primitive
Fully keyboard accessible with space key toggle
Supports disabled state with visual feedback
Works with form libraries and validation
Includes label and description pairing options
Shadcn/ui Checkbox - Figma Component
A control that allows the user to toggle between checked and not checked. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Checkbox variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Checkbox states in Figma
The shadcn/ui figma Checkbox includes checked, unchecked, and indeterminate states. Design forms and filters in Figma with all checkbox states for parent-child selections. This shadcn figma component matches the Radix UI implementation perfectly.
Using checkboxes in forms
Design checkbox groups in Figma for multi-select forms, settings panels, and filter interfaces. The shadcn/ui figma Checkbox includes proper spacing and alignment so your forms look professional and are easy to use.
Checkbox labels and accessibility
This shadcn figma Checkbox is designed with accessible click targets and label association. Design forms in Figma where users can click labels to toggle checkboxes, making your interfaces easier to use on mobile and desktop.
Checkbox vs radio buttons
Use the shadcn/ui figma Checkbox for multiple selections and Radio Group for single selections. Design the right form controls in Figma for each use case, ensuring users understand what type of selection they can make.