Prepared Docs

InputWithSelect extends Input with either selectOptions + Radix Select, or a custom selectControl node. Set selectControlPosition to SelectControlPosition.Lead or Tail. Inherits standard Input props (label, masking, affixes) while wiring selectedValue, onSelectChange, selectWidth, selectDisabled, and selectPlaceholder.

Props

Name	Type	Default	Description
`selectControlPosition`	`SelectControlPosition`	—	Position of the select dropdown
`aria-errormessage`	`string`	—	ID of the element that describes the error when input is invalid. Only use when aria-invalid is set to true.
`borderStyle`	`InputBorderStyle`	—	Visual border treatment for the field shell; defaults from brand package when omitted.
`countryCode`	`CountryIso2`	—	Country code for international phone number masking (ISO 3166-1 alpha-2 code, e.g., "us", "ca", "mx") Only applies when maskType is Phone
`defaultValue`	`string`	—	Default value for uncontrolled usage. Ignored when `value` is provided.
`helperText`	`string`	—	Hint or validation text displayed below the input field.
`helperTextColor`	`TextColor`	—	Color variant for the helper text (e.g., error, alt).
`label`	`string`	—	Text label displayed above the input field.
`labelColor`	`LabelColor`	—	Color variant for the label text.
`leadButtonTitle`	`string`	—	Accessible title for the leading icon button.
`leadIcon`	`SVGAsset`	—	SVG icon displayed at the leading (left) edge of the input.
`leadSnackbar`	`SnackbarProps`	—	—
`masked`	`boolean`	—	Triggers masking for formatted values (automatically enabled for phone, URL, and email inputs)
`maskType`	`MaskType \| ((value: string) => string)`	—	Specifies the type of mask to apply (e.g., 'phone', 'url', etc.) Otherwise, defaults based on input type
`max`	`number`	—	Maximum value for number inputs.
`min`	`number`	—	Minimum value for number inputs.
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>`	—	Keyboard event handler for the input element.
`onLeadIconClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler for the leading icon, turning it into a clickable button.
`onLeadIconMouseDown`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Mouse-down handler for the leading icon button.
`onRawChange`	`((rawValue: string, formattedValue: string) => void)`	—	Callback fired when input changes, providing both the raw (unmasked) and formatted values @param rawValue The unmasked/raw user input @param formattedValue The formatted value after masking is applied
`onSelectChange`	`((value: string) => void)`	—	Callback when the select value changes
`onTailIconClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler for the trailing icon, turning it into a clickable button.
`onTailIconMouseDown`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Mouse-down handler for the trailing icon button.
`prefix`	`ReactNode`	—	Text or element displayed before (to the left of) the input field. When specified, applies a special container style with a string and border.
`selectControl`	`ReactNode`	—	Custom control to render instead of the default Select
`selectDisabled`	`boolean`	—	Whether the select dropdown is disabled
`selectedValue`	`string`	—	Currently selected value in the dropdown
`selectOptions`	`SelectOption[]`	—	Options for the select dropdown
`selectPlaceholder`	`string`	—	Placeholder for the select dropdown
`selectWidth`	`SelectControlWidth`	`SelectControlWidth.Medium`	Width of the select dropdown
`suffix`	`ReactNode`	—	Text or element displayed after (to the right of) the input field. When specified, applies a special container style with a string and border.
`tailButton`	`TailButtonConfig`	—	Configuration for a text button appended to the trailing edge of the input. Takes priority over `tailIconButton`.
`tailButtonTitle`	`string`	—	Accessible title for the trailing icon button.
`tailIcon`	`SVGAsset`	—	SVG icon displayed at the trailing (right) edge of the input.
`tailIconButton`	`TailIconButtonConfig`	—	Configuration for an icon-only button appended to the trailing edge of the input. Ignored if `tailButton` is set.
`tailIconColor`	`IconColor`	—	Override color for the trailing icon.
`tailSnackbar`	`SnackbarProps`	—	—
`twilioLookupResult`	`PhoneNumberLookupResult \| null`	—	Optional Twilio Lookup result for enhanced E.164 conversion. When provided, the E.164 format from Twilio will be used instead of manual construction.

Storybook

Interactive examples and edge cases for this component are in Storybook.

With Lead Select

With Tail Select

With Required

Phone With Country Code

Disabled With Select

Lead Select With Suffix

Tail Select With Prefix

Select Input Variations

Plus all Input props except ref forwarding uses the outer ref on the text field.

Lead select (currency)

Tail select

Required

Disabled

Lead select with suffix

Tail select with prefix

With error state

With lead and tail icons

Input with Select / Usage

Input with Select / Accessibility

Props

Storybook

Lead select (currency)

Tail select

Required

Disabled

Lead select with suffix

Tail select with prefix

With error state

With lead and tail icons

View Source

Submit Issue

Props

Name	Type	Default	Description
`selectControlPosition`	`SelectControlPosition`	—	Position of the select dropdown
`aria-errormessage`	`string`	—	ID of the element that describes the error when input is invalid. Only use when aria-invalid is set to true.
`borderStyle`	`InputBorderStyle`	—	Visual border treatment for the field shell; defaults from brand package when omitted.
`countryCode`	`CountryIso2`	—	Country code for international phone number masking (ISO 3166-1 alpha-2 code, e.g., "us", "ca", "mx") Only applies when maskType is Phone
`defaultValue`	`string`	—	Default value for uncontrolled usage. Ignored when `value` is provided.
`helperText`	`string`	—	Hint or validation text displayed below the input field.
`helperTextColor`	`TextColor`	—	Color variant for the helper text (e.g., error, alt).
`label`	`string`	—	Text label displayed above the input field.
`labelColor`	`LabelColor`	—	Color variant for the label text.
`leadButtonTitle`	`string`	—	Accessible title for the leading icon button.
`leadIcon`	`SVGAsset`	—	SVG icon displayed at the leading (left) edge of the input.
`leadSnackbar`	`SnackbarProps`	—	—
`masked`	`boolean`	—	Triggers masking for formatted values (automatically enabled for phone, URL, and email inputs)
`maskType`	`MaskType \| ((value: string) => string)`	—	Specifies the type of mask to apply (e.g., 'phone', 'url', etc.) Otherwise, defaults based on input type
`max`	`number`	—	Maximum value for number inputs.
`min`	`number`	—	Minimum value for number inputs.
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>`	—	Keyboard event handler for the input element.
`onLeadIconClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler for the leading icon, turning it into a clickable button.
`onLeadIconMouseDown`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Mouse-down handler for the leading icon button.
`onRawChange`	`((rawValue: string, formattedValue: string) => void)`	—	Callback fired when input changes, providing both the raw (unmasked) and formatted values @param rawValue The unmasked/raw user input @param formattedValue The formatted value after masking is applied
`onSelectChange`	`((value: string) => void)`	—	Callback when the select value changes
`onTailIconClick`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Click handler for the trailing icon, turning it into a clickable button.
`onTailIconMouseDown`	`((e: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	Mouse-down handler for the trailing icon button.
`prefix`	`ReactNode`	—	Text or element displayed before (to the left of) the input field. When specified, applies a special container style with a string and border.
`selectControl`	`ReactNode`	—	Custom control to render instead of the default Select
`selectDisabled`	`boolean`	—	Whether the select dropdown is disabled
`selectedValue`	`string`	—	Currently selected value in the dropdown
`selectOptions`	`SelectOption[]`	—	Options for the select dropdown
`selectPlaceholder`	`string`	—	Placeholder for the select dropdown
`selectWidth`	`SelectControlWidth`	`SelectControlWidth.Medium`	Width of the select dropdown
`suffix`	`ReactNode`	—	Text or element displayed after (to the right of) the input field. When specified, applies a special container style with a string and border.
`tailButton`	`TailButtonConfig`	—	Configuration for a text button appended to the trailing edge of the input. Takes priority over `tailIconButton`.
`tailButtonTitle`	`string`	—	Accessible title for the trailing icon button.
`tailIcon`	`SVGAsset`	—	SVG icon displayed at the trailing (right) edge of the input.
`tailIconButton`	`TailIconButtonConfig`	—	Configuration for an icon-only button appended to the trailing edge of the input. Ignored if `tailButton` is set.
`tailIconColor`	`IconColor`	—	Override color for the trailing icon.
`tailSnackbar`	`SnackbarProps`	—	—
`twilioLookupResult`	`PhoneNumberLookupResult \| null`	—	Optional Twilio Lookup result for enhanced E.164 conversion. When provided, the E.164 format from Twilio will be used instead of manual construction.