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	CatnipInputPhoneModelValue	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. Pair with open-change.
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 field label when the label slot is empty.
optional	boolean	false	—	When true and not required, shows the localized optional hint.
optionalText	string	""	—	Overrides the localized optional hint (HTML: optional-text).
info	string	""	—	Info tooltip beside the label; when non-empty, it wins over the label.suffix slot.
alignment	"left" | "center" | "right"	"left"	left, center, right	Horizontal alignment of the field label block.
requiredMarker	string	"*"	—	Visual marker for required fields (HTML: required-marker).
requiredScreenReaderText	string	""	—	Optional screen-reader supplement; it does not replace required on the control (HTML: required-screen-reader-text).
supportingText	SupportingTextProp	""	—	One or more helper or validation messages. Each object requires text; intent accepts neutral, danger, warning, or success, and icon accepts a Catnip icon name. See supporting-text examples.

State

Prop	Type	Default	Options	Description
size	"s" | "m" | "l"	"m"	s, m, l	Dimensions and typography.
intent	"neutral" | "danger" | "warning" | "success"	"neutral"	neutral, danger, warning, success	Semantic state applied to field and supporting-text 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	TestSelectorsProp	See Test selectors	—	Overrides stable data-test values.

Events

Name	Payload	Description
update:modelValue	{ countryCode: string; countryIsoCode: string; phoneNumber: string } | null	Value changed.
open-change	boolean	Country picker open state changed. Use @open-change.
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