Phone Input

Phone Input provides international phone number entry with country selection, formatting, validation support, and floating labels.

Quick Start

Use a PhoneInput to collect international telephone numbers with country selection.

Phone number

1import PhoneInput from "@ecos/ui/phone-input";
2
3<PhoneInput
4label="Phone number"
5/>

Variants

Variants provide different visual treatments for phone number input.

Outlined	Filled	Custom
Phone number	Phone number	Phone number

1<PhoneInput
2label="Phone number"
3variant="outlined"
4/>
5
6<PhoneInput
7label="Phone number"
8variant="filled"
9/>
10
11<PhoneInput
12label="Phone number"
13variant="custom"
14/>

Floating Labels

Labels automatically float when the field receives focus or contains a value.

Phone number

1<PhoneInput
2label="Phone number"
3value="+447912345678"
4/>

Placeholders

Placeholders can provide formatting guidance or example telephone numbers.

United Kingdom	Germany	United States
Phone number+44 7912 345678	Phone number+49 1512 3456789	Phone number+1 202 555 0123

1<PhoneInput
2label="Phone number"
3placeholder="+44 7912 345678"
4/>
5
6<PhoneInput
7label="Phone number"
8placeholder="+49 1512 3456789"
9/>
10
11<PhoneInput
12label="Phone number"
13placeholder="+1 202 555 0123"
14/>

Country Selection

Users can search and select from supported countries. Numbers are automatically formatted using the selected country's numbering plan.

Phone number

1<PhoneInput
2label="Phone number"
3/>

Help Text

Use help text to provide additional context or guidance.

Mobile number

Include your country code.

1<PhoneInput
2label="Mobile number"
3helpText="Include your country code."
4/>

Required Fields

Use the required prop to indicate mandatory fields.

Phone number*

1<PhoneInput
2label="Phone number"
3required
4/>

Input States

Use the state prop to communicate validation feedback.

Phone number

Please enter a valid phone number.

Phone number

Phone number verified.

1<div className="space-y-4">
2<PhoneInput
3  label="Phone number"
4  state="default"
5/>
6
7<PhoneInput
8  label="Phone number"
9  state="error"
10  helpText="Please enter a valid phone number."
11/>
12
13<PhoneInput
14  label="Phone number"
15  state="success"
16  value="+447912345678"
17  helpText="Phone number verified."
18/>
19</div>

Disabled State

Disable the component when phone number entry is unavailable.

Phone number

1<PhoneInput
2label="Phone number"
3value="+447912345678"
4disabled
5/>

Controlled Usage

Manage the value externally using React state.

Phone number

1const [value, setValue] = useState<string | undefined>();
2
3<PhoneInput
4label="Phone number"
5value={value}
6onChange={setValue}
7/>

International Examples

PhoneInput automatically formats numbers for different countries.

United Kingdom	Germany	France
UK Number	German Number	French Number

1<PhoneInput
2label="UK Number"
3value="+447912345678"
4/>
5
6<PhoneInput
7label="German Number"
8value="+4915123456789"
9/>
10
11<PhoneInput
12label="French Number"
13value="+33612345678"
14/>

API Reference

Property	Type	Default	Description
label	string	-	Floating label displayed for the phone input.
placeholder	string	-	Placeholder text displayed when no value has been entered.
helpText	string	-	Additional supporting text displayed beneath the field.
variant	"outlined" \| "filled" \| "custom"	"outlined"	Determines the visual appearance of the phone input.
state	"default" \| "error" \| "success"	"default"	Displays validation and status styling.
required	boolean	false	Marks the field as required.
disabled	boolean	false	Prevents user interaction and country selection.
value	string \| undefined	-	The current phone number value in international format.
onChange	(value: string \| undefined) => void	-	Called when the phone number changes.
defaultCountry	Country	Tenant configured country	The initially selected country.
className	string	-	Additional classes applied to the component.

Visual Reference

Configuration	Preview
Outlined	Phone number
Filled	Phone number
Custom	Phone number
Required	Phone number*
Error	Phone number Please enter a valid phone number.
Success	Phone number Phone number verified.
Disabled	Phone number

Phone Input

Quick Start

Variants

Outlined

Filled

Custom

Floating Labels

Placeholders

United Kingdom

Germany

United States

Country Selection

Help Text

Required Fields

Input States

Disabled State

Controlled Usage

International Examples

United Kingdom

Germany

France

API Reference

Property

Type

Default

Description

Visual Reference

Configuration

Preview