Shadcn.io is not affiliated with official shadcn/ui
Right-Aligned Checkbox
A React right-aligned checkbox list with label-first layout for toggle-style controls like notification settings using shadcn/ui
Labels on the left, checkboxes on the right—it's the settings toggle aesthetic. This React right-aligned checkbox list uses justify-between flex layout putting labels left and checkboxes right with maximum space between. Built with shadcn/ui rendering label-first for natural reading flow before interaction. The alignment mimics toggle switches creating visual consistency with modern settings interfaces. Perfect for preference panels, notification settings, feature toggles, or any interface where checkboxes function like on/off switches rather than multi-select items.
Right-Aligned Checkbox preview
Installation
Related Components
Vertical List Checkbox
Standard left-aligned checkboxes
Toggle Switch
Switch-style binary control
Simple Checkbox
Basic left-aligned checkbox
Checkbox with Description
Checkboxes with explanation text
Horizontal List Checkbox
Inline checkbox flow
Disabled Checkbox
Non-interactive states
FAQ
Was this page helpful?
Sign in to leave feedback.