PhoneInput

International phone entry with country selection and formatted numbers.

CoreAdvanced Inputs@gaudi/design-system/core/PhoneInputView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { PhoneInput } from '@gaudi/design-system/core/PhoneInput';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/phone-input-field-states.json.

Usage

import { PhoneInput } from '@gaudi/design-system/core/PhoneInput';
<PhoneInput aria-label='Phone number' value={phone} onChange={setPhone} defaultCountry='GB' />

Examples

Field states

Storybook

API

7 props

Accessibility

Associate a visible label with the input and name the country selector. The application owns phone verification and validity feedback.

InputText, search, numeric and date inputs with prefix and suffix slots.11 examples FieldField composes form label, description, error, and input building blocks.7 examples CalendarDate selection for single dates, ranges, bookings and localized calendars.11 examples CascaderSelect items from hierarchical data using drill-down, columns, search and multiple selection.12 examples ColorPickerAn inline color canvas with hue, opacity, an eyedropper, and HEX/RGB/HSL/CSS editors.FileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examples