Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    PhoneInput

    A phone field with a country code picker; Turkey by default, sent in E.164.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { PhoneInput } from '@bigbang/ui';
    Source
    PhoneInput.tsx
    Storybook
    PhoneInput · Playground

    PhoneInput is in the @bigbang/ui package.

    import { PhoneInput, isPhoneComplete, toE164 } from '@bigbang/ui';
    

    <PhoneInput label="Phone" name="phone" countries={['TR', 'AZ']} value={phone} onValueChange={setPhone} />;

    Helpers: parsePhone(text, country, allowed), toE164(value), isPhoneComplete(value), phoneCountries.

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label; it names the group and the number field.
    Type
    string
    description
    Description
    Help text under the field, linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and the message is read with the number.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message.
    Type
    boolean
    Default
    false
    required
    Description
    The value is required: the number gets required, and the label is marked.
    Type
    boolean
    Default
    false
    value
    Description
    Controlled value: a country and its national digits without the trunk 0, or null while empty. Pass it with onValueChange.
    Type
    PhoneValue | null
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    PhoneValue
    onValueChange
    Description
    Called with the new value and the number in E.164 (+905321234567), or null while it is empty.
    Type
    (value: PhoneValue | null, e164: string | null) => void
    defaultCountry
    Description
    Country selected while the field is empty.
    Type
    'TR' | 'AZ' | 'DE' | 'FR' | 'GB' | 'NL' | 'US'
    Default
    'TR'
    countries
    Description
    Countries offered in the picker, in this order. Leave it out to offer all.
    Type
    readonly ('TR' | 'AZ' | 'DE' | 'FR' | 'GB' | 'NL' | 'US')[]
    size
    Description
    Input height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    readOnly
    Description
    The value can be read and copied but not changed.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the picker, the number and the label.
    Type
    boolean
    Default
    false
    name
    Description
    Field name; the form receives the number in E.164.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="phone-input": on the root element.
    • data-part: label, box, country, popup, item, control, description, error.