Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Disabled Checkbox
A React checkbox in disabled state showing both unchecked and checked variations for read-only or unavailable options using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes checkboxes need to be seen but not touched. This React disabled checkbox demonstrates both unchecked and checked disabled states using the disabled prop, rendering with reduced opacity and preventing interaction. Built with shadcn/ui applying text-muted-foreground to labels for visual consistency. Perfect for showing unavailable features in locked plans, read-only form views, conditionally disabled options based on other selections, or completed immutable tasks. Users see the option exists but can't change it.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Checkbox
Interactive checkbox
Todo-Style Checkbox
Checkboxes for task completion
Indeterminate Checkbox
Three-state checkbox
Button
Disabled button states
Input
Disabled input fields
Vertical List Checkbox
Multiple checkboxes