Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Simple Checkbox
A React checkbox with label for basic binary selection using shadcn/ui and Radix UI for accessible form controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Forms need checkboxes—it's that simple. This React checkbox pairs shadcn/ui's Checkbox component with a Label for clickable text, making the entire label activate the checkbox. Built with Radix UI primitives ensuring keyboard navigation and screen reader support work perfectly. The space-x-2 gap keeps checkbox and label visually connected. Perfect for terms acceptance, preference toggles, or any binary choice in forms and settings.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Indeterminate Checkbox
Checkbox with three-state support
Disabled Checkbox
Non-interactive checkbox states
Todo-Style Checkbox
Checkbox with strikethrough on checked
Vertical List Checkbox
Multiple checkboxes in vertical layout
Toggle Switch
Alternative binary input control
Radio Group
Single-selection alternative
Questions you might have
React Chart - Tooltip - No Label
A React chart tooltip without label header using hideLabel and hideIndicator props with shadcn/ui and Recharts
React Checkbox - With Description
A React checkbox with multi-line description text below label for detailed explanations using shadcn/ui and Tailwind typography