React Button Group with Select
A button group combining Select components with static text for compound inputs like phone numbers and URLs
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Structured inputs need visual grouping—combined selects and text unify related fields. This React component merges shadcn/ui's ButtonGroup, Select, and ButtonGroupText components for cohesive compound input controls. Built on Radix UI with SelectTrigger using bg-background for seamless integration and ButtonGroupText displaying static content, the pattern creates unified form inputs where selections modify adjacent text interpretation. Perfect for international phone number inputs with country code selectors, URL builders with protocol dropdowns, currency amount fields with denomination selectors, or any compound input where select options modify adjacent field context—button groups unify components visually, select integration provides contextual input modification.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-2.jsonRelated patterns you will also like
Select Component
Basic dropdown select
Basic Button Group
Simple grouped buttons
Stepper Button Group
Numeric input controls
Input Component
Text input fields
Combobox Component
Searchable select dropdowns
Form Component
Form layout patterns