Cleave.js docs

Input text formatter

Format input text content when you are typing.

Input text formatting feature is enabled through the Cleave.js component.

The Credit Card Input, a custom Cartzilla component, is also built on top of the Cleave.js component.

Payment card number

'use client'

import CreditCardInput from '@/components/forms/credit-card-input'
import FormLabel from 'react-bootstrap/FormLabel'

export default function InputFormatterCardDemo() {
  return (
    <>
      <FormLabel htmlFor="card">Card number</FormLabel>
      <CreditCardInput
        id="card"
        placeholder="Enter card number"
        onCardTypeChange={(type) => console.log(type)}
        onCardNumberChange={(number) => console.log(number)}
      />
    </>
  )
}

Phone number

'use client'

import FormControl from 'react-bootstrap/FormControl'
import FormLabel from 'react-bootstrap/FormLabel'
import Cleave from 'cleave.js/react'

export default function InputFormatterPhoneDemo() {
  return (
    <>
      <FormLabel htmlFor="phone">Phone</FormLabel>
      <FormControl
        as={Cleave}
        id="phone"
        options={{ numericOnly: true, delimiters: ['+1 ', ' ', ' '], blocks: [0, 3, 3, 2] }}
        placeholder="+1 ___ ___ __"
      />
    </>
  )
}

Date

'use client'

import FormControl from 'react-bootstrap/FormControl'
import FormLabel from 'react-bootstrap/FormLabel'
import Cleave from 'cleave.js/react'

export default function InputFormatterDateDemo() {
  return (
    <>
      <FormLabel htmlFor="date">Date</FormLabel>
      <FormControl
        as={Cleave}
        id="date"
        options={{ date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] }}
        placeholder="yyyy-mm-dd"
        className="mb-3"
      />

      <FormLabel htmlFor="date-short">Date short</FormLabel>
      <FormControl
        as={Cleave}
        id="date-short"
        options={{ date: true, datePattern: ['m', 'y'] }}
        placeholder="mm/yy"
      />
    </>
  )
}

Time

'use client'

import FormControl from 'react-bootstrap/FormControl'
import FormLabel from 'react-bootstrap/FormLabel'
import Cleave from 'cleave.js/react'

export default function InputFormatterTimeDemo() {
  return (
    <>
      <FormLabel htmlFor="time">Time</FormLabel>
      <FormControl
        as={Cleave}
        id="time"
        options={{ time: true, timePattern: ['h', 'm'] }}
        placeholder="hh:mm"
      />
    </>
  )
}

Custom blocks

'use client'

import FormControl from 'react-bootstrap/FormControl'
import FormLabel from 'react-bootstrap/FormLabel'
import Cleave from 'cleave.js/react'

export default function InputFormatterCustomBlocksDemo() {
  return (
    <>
      <FormLabel htmlFor="custom">Custom blocks</FormLabel>
      <FormControl
        as={Cleave}
        id="custom"
        options={{ blocks: [4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-'] }}
        placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']"
        style={{ maxWidth: 400 }}
      />
    </>
  )
}

Prefix and uppercase

'use client'

import FormControl from 'react-bootstrap/FormControl'
import FormLabel from 'react-bootstrap/FormLabel'
import Cleave from 'cleave.js/react'

export default function InputFormatterPrefixUppercaseDemo() {
  return (
    <>
      <FormLabel htmlFor="prefix">Prefix + uppercase</FormLabel>
      <FormControl
        as={Cleave}
        id="prefix"
        options={{ prefix: 'PREFIX', delimiter: '-', blocks: [6, 4, 5, 3], uppercase: true }}
      />
    </>
  )
}
Top