Shadcn.io is not affiliated with official shadcn/ui
Disabled Checkbox
A React checkbox in disabled state showing both unchecked and checked variations for read-only or unavailable options using shadcn/ui
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.
Disabled Checkbox preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.