Ana içeriğe geç

Phone Input

Phone number input with customizable masking and formatting.

Features​

  • 📱 Phone number masking
  • 🌍 International format support
  • ⌨️ Numeric keyboard
  • 🎭 Custom mask patterns

Basic Usage​

import {Input} from '@tansuk/rott-ui'

<Input
  name='phone'
  type='phone'
  mask='+1 ([000]) [000]-[0000]'
  value={phone}
  onChangeText={setPhone}
/>

With Label​

<Input
  name='phone'
  type='phone'
  label='Phone Number'
  mask='+1 ([000]) [000]-[0000]'
  placeholder='+1 (555) 123-4567'
  value={phone}
  onChangeText={setPhone}
/>

Custom Masks​

US Format​

<Input
  name='phone'
  type='phone'
  mask='+1 ([000]) [000]-[0000]'
  placeholder='+1 (555) 123-4567'
/>

Turkish Format​

<Input
  name='phone'
  type='phone'
  mask='+90 ([000]) [000] [00] [00]'
  placeholder='+90 (555) 123 45 67'
/>

UK Format​

<Input
  name='phone'
  type='phone'
  mask='+44 [0000] [000000]'
  placeholder='+44 7700 900123'
/>

Simple Format​

<Input
  name='phone'
  type='phone'
  mask='([000]) [000]-[0000]'
  placeholder='(555) 123-4567'
/>

Props​

PropTypeDescription
namestringRequired - Input identifier
type'phone'Required - Must be 'phone'
maskstringRequired - Phone mask pattern
valuestringCurrent value
onChangeText(text: string) => voidChange handler
placeholderstringPlaceholder text
labelstring | InputLabelPropsInput label

Mask Pattern​

Use these characters in your mask:

  • [0] - Single digit (0-9)
  • [000] - Three digits
  • (), -, , + - Literal characters

Validation Example​

import {Formik} from 'formik'
import * as Yup from 'yup'

const PhoneSchema = Yup.object().shape({
  phone: Yup.string()
    .matches(/^\+?[1-9]\d{1,14}$/, 'Invalid phone')
    .required('Required'),
})

<Formik
  initialValues={{phone: ''}}
  validationSchema={PhoneSchema}
  onSubmit={handleSubmit}>
  {({handleChange, values, errors, touched}) => (
    <Input
      name='phone'
      type='phone'
      mask='+1 ([000]) [000]-[0000]'
      label='Phone'
      value={values.phone}
      onChangeText={handleChange('phone')}
      errorMessage={touched.phone ? errors.phone : ''}
      touched={touched.phone}
    />
  )}
</Formik>