InputWithSelect fuses a text field with a compact select so a qualifier and a freeform value share one field: country code plus phone, currency plus amount, scope plus identifier. The mental model is "these two pieces are inseparable—interpret them together". It reduces horizontal scanning versus two separate fields while keeping a single tab-stop contract when the design sequences focus correctly.
- The select changes format or validation rules for the text value (dialing country code, unit of measure, protocol prefix).
- Both pieces are required together to interpret the input at all.
- Horizontal space is tight in filters, modals, or table toolbars and two separate fields would crowd the row.
- Only one option exists—use a static prefix label or affix text instead of a redundant select.
- The select chooses between entirely different fields—show separate inputs so operators don't miss a hidden control.
- Long, unsearchable select lists—promote the select portion to a
Combobox.
A lead or tail Select sits next to an Input; label and helper/error text span the combined control. Lead selects typically determine parsing (country code before a phone number); tail selects usually annotate value (unit after a number).
- The select's options are short and sentence-cased; never duplicate the field label in option text. Localize with
formatMessage.
- Helper text applies to the combined control. On validation error, name the offending segment ("Select a country", "Enter 10 digits").
- Validation. Surface which segment failed; the other segment's state should reflect that ("Country code valid; phone is too short").
- Disabled. Disable both segments together unless product rules require mixed states (rare; needs design approval).
- Keyboard. Tab moves from the label or external control into the select, then into the input, then out. Don't split the control across multiple Tab-stops with visual ambiguity.
Do
- Default the select to the most common agency or locale context (home country, primary currency) so the operator rarely has to change it.
- Keep select lists short; move rare options behind search if the list grows.
- Align the select width so it reads as a qualifier, not a competing field.
Don't
- Nest another complex picker inside the select slot without an accessibility review.
- Use
InputWithSelect when the text portion isn't meaningful. If the select is the only decision, use a plain Select.
- Change validation dramatically when the select changes without surfacing the new rule in helper text.
Expose a unified label and describe both parts; screen readers must hear the current select value and the text value. See Accessibility for the full contract.
