Phone Input

Shared label and supporting-text behaviour is summarised on Inputs overview.

catnip-input-phone

Props

Value & country selection

Prop	Type	Default	Options	Description
modelValue	{ countryCode: string; countryIsoCode: string; phoneNumber: string } | null	null	—	Phone value; countryCode is the dial prefix (e.g. "+47"), and countryIsoCode disambiguates countries sharing a prefix.
defaultCountryCode	string	"auto"	ISO code, dial prefix, or auto	Country used when modelValue.countryIsoCode is absent. auto uses browser locale, then NO.
placeholder	string	""	—	Placeholder for the phone-number text field.
autocomplete	string	"tel"	—	Native autocomplete on the telephone input.
showClearButton	boolean	false	—	Shows a clear control when a phone number is present.

Country list

Prop	Type	Default	Options	Description
open	boolean	—	—	Controlled open state for the country picker.
filterValue	string	—	—	Controlled search text for the country picker.
filterPlaceholder	string	""	—	Search placeholder; defaults to bundled locale copy.
listMaxHeight	string | number	"280px"	—	Max height for the scrollable country list body.

Field presentation

Prop	Type	Default	Options	Description
label	string	""	—	Visible label text when the label slot is empty.
optional	boolean	false	—	Shows optional hint on the label when not required.
optionalText	string	""	—	Overrides optional hint text (HTML: optional-text).
info	string	""	—	Info tooltip on the label (info wins over the label.suffix slot when both are set).
alignment	string	"left"	left, center, right	Label alignment.
requiredMarker	string	"*"	—	Visual required marker (HTML: required-marker).
requiredScreenReaderText	string	""	—	Supplemental screen-reader text for required fields (HTML: required-screen-reader-text).
supportingText	string | string[] | { text, intent?, icon? } | { text, intent?, icon? }[]	Message(s) below the field. See Inputs overview — Multiple supporting messages.

State

Prop	Type	Default	Options	Description
size	string	"m"	s, m, l	Dimensions and typography.
intent	string	"neutral"	neutral, warning, danger, success	Status styling; danger sets aria-invalid on the telephone input.
disabled	boolean	false	—	Disables the country picker and telephone input.
readonly	boolean	false	—	Makes the control read-only and prevents country-picker changes.
required	boolean	false	—	Native required on the telephone input and label marker.
ariaLabel	string	""	—	aria-label for the telephone input when there is no visible label.
ariaDescribedby	string	""	—	Extra id values merged into aria-describedby alongside generated supporting-text ids.

Advanced

Prop	Type	Default	Options	Description
id	string	""	—	DOM id for the telephone input.
name	string	""	—	Native form name on the form-associated CE.
autofocus	boolean	false	—	Autofocus (use sparingly).
hideLabel	boolean	false	—	Hides the built-in label row.
clearButtonAriaLabel	string	""	—	Accessible label for clear; defaults to bundled locale copy.
countryButtonAriaLabel	string	""	—	Accessible label for the country picker button/list.
testSelectors	object	See Test selectors	—	Overrides for data-test.

Events

Name	Payload	Description
update:modelValue	{ countryCode: string; countryIsoCode: string; phoneNumber: string } | null	Value changed.
update:open	boolean	Country picker open state changed.
update:filterValue	string	Country search text changed.
close	—	Country picker closed.

Slots

Name	Description
label	Custom label content; falls back to label prop.
label.action	Trailing action in the label row (e.g. link).
label.suffix	Custom label suffix (suffix slot); used only when info is empty.

Test selectors

Attribute	Default	Applies to
root	catnip-input-phone	Field wrapper
control	catnip-input-phone-control	Native telephone input
countryButton	catnip-input-phone-country-button	Country picker button
countryFlag	catnip-input-phone-country-flag	Trigger/list flag
countryDialCode	catnip-input-phone-country-dial-code	Country list dial code
chevron	catnip-input-phone-chevron	Country picker chevron
clearButton	catnip-input-phone-clear	Clear control
supportingText	catnip-input-phone-supporting-text	Supporting message
floatingPanel	{ root: "catnip-floating-panel" }	Floating country panel
list	{ root, header, body, footer }	Internal country list
filterInput	{ root, control, icon }	Search row
option	catnip-input-phone-option	Country list row