Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Field - Select in Horizontal Layout
A React select dropdown with horizontal field orientation placing FieldLabel beside SelectTrigger for compact Theme selection
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Compact settings need horizontal layouts—label beside select saves vertical space for dense UIs. This React select uses shadcn/ui Field component with orientation equals horizontal prop positioning FieldLabel beside Select for Theme choice (Light, Dark, System). Built with Field horizontal orientation and defaultValue, label and select align side-by-side—perfect for settings panels, toolbars, preferences, filters, or anywhere compact form layout fits more controls in limited vertical space.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Select
Vertical select layout (standard)
Horizontal Layout
Horizontal field orientation
Select with Default
Select with default value
Theme Selector
Theme dropdown in menu
Responsive Layout
Adaptive field orientation
Switch Toggle
Horizontal toggle control
Questions you might have
React Field - Select with Helper Text Above
A React select dropdown with FieldDescription positioned above the SelectTrigger providing context before user makes selection
React Field - Select with Default Value
A React select dropdown with defaultValue prop pre-selecting Active status option for account status management