Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Simple Checkbox
A React checkbox field with horizontal layout for inline agreement forms like terms and conditions built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Nobody likes vertically stacked labels that make checkboxes feel detached. This React checkbox uses horizontal orientation from shadcn/ui Field component—checkbox and label side-by-side just like users expect. Built with Radix UI Checkbox primitives and proper htmlFor/id associations, it's perfect for terms agreements, newsletter subscriptions, or any quick yes/no choice where inline layout feels natural.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Checkbox with Description
Checkbox with helper text for context
Multiple Checkboxes
Grouped checkboxes in fieldset
Simple Switch
Toggle switch for on/off states
Radio Buttons
Single selection from multiple options
Simple Input with Label
Basic text input with label
Fieldset with Legend
Grouped form fields with title
Questions you might have
React Field - Textarea with Detailed Instructions
A React textarea field with comprehensive multi-sentence instructions for issue reporting including steps to reproduce and response timeframe built with shadcn/ui
React Field - Multiple Checkboxes
A React fieldset with multiple checkboxes for settings like desktop item preferences using legend and description built with shadcn/ui