Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Right-Aligned Checkbox
A React right-aligned checkbox list with label-first layout for toggle-style controls like notification settings using shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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