kesp-ui
npm ↗
Component

Aadhaar Input

A formatted input component for Indian Aadhaar numbers. Automatically segments the 12-digit number into three groups of four, with validation feedback, and full keyboard navigation.

Real-time validationSegment progressAccessibleControlled & uncontrolled

Installation

npx kesp-ui@latest add aadhaar-input

Or specify a custom path: npx kesp-ui@latest add aadhaar-input -p src/components/ui

Preview

Interactive
Default
Enter your 12-digit Aadhaar number
With Error
Please enter a valid 12-digit Aadhaar number
Disabled
Enter your 12-digit Aadhaar number
Custom Label & Separator
Enter your 12-digit Aadhaar number

Usage

Basic Usage
import AadhaarInput from "@/components/ui/aadhaar-input"

function MyForm() {
  const [aadhaar, setAadhaar] = useState<string>("")

  return (
    <AadhaarInput
      value={aadhaar}
      onChange={setAadhaar}
      onComplete={(value: string) => console.log("Aadhaar:", value)}
    />
  )
}
With Validation
import AadhaarInput from "@/components/ui/aadhaar-input"

function ValidatedForm() {
  const [value, setValue] = useState<string>("")
  const [error, setError] = useState<boolean>(false)
  const [errorMsg, setErrorMsg] = useState<string>("")

  const handleComplete = (aadhaar: string) => {
    if (!isValidAadhaar(aadhaar)) {
      setError(true)
      setErrorMsg("Invalid Aadhaar number")
    } else {
      setError(false)
      setErrorMsg("")
    }
  }
  
  return (
    <AadhaarInput
      value={value}
      onChange={(v: string) => { setValue(v); setError(false); setErrorMsg("") }}
      onComplete={handleComplete}
      error={error}
      errorMessage={errorMsg}
    />
  )
}
Uncontrolled Mode
// Works without value prop — manages state internally
<AadhaarInput
  onChange={(value: string) => console.log(value)}
  onComplete={(value: string) => submitForm(value)}
/>
Custom Styling
<AadhaarInput
  label="आधार संख्या"
  placeholder="0000"
  separator=" · "
  className="max-w-sm"
/>

Error Handling

Error State

Set error=true to highlight all segments with a destructive border. Add errorMessage for descriptive text below.

<AadhaarInput
  error={true}
  errorMessage="Please enter a valid 12-digit Aadhaar number"
/>

Success State

When all 12 digits are entered and error is false, a green "Valid Aadhaar number" message appears automatically. The onComplete callback fires.

<AadhaarInput
  onComplete={(value: string) => {
    // value = "123456789012" (raw 12 digits)
    validateWithAPI(value)
  }}
/>

Props

valuestring
Default:undefined

Controlled value (12 digits, no formatting)

onChange(value: string) => void
Default:undefined

Called on every digit change with raw 12-digit string

onComplete(value: string) => void
Default:undefined

Fired when all 12 digits are entered

errorboolean
Default:false

Displays error styling on all segments

errorMessagestring
Default:undefined

Error text shown below the input

disabledboolean
Default:false

Disables all input segments

labelstring
Default:"Aadhaar Number"

Label text above the input

placeholderstring
Default:"0000 0000 0000"

Placeholder for the input field

separatorstring
Default:" "

Character(s) shown between segments

classNamestring
Default:""

Additional CSS classes on the wrapper

CLI Reference

Install component
npx kesp-ui@latest add aadhaar-input
Custom path
npx kesp-ui@latest add aadhaar-input -p src/components/ui
List components
npx kesp-ui@latest list
Check version
npx kesp-ui --version
Help
npx kesp-ui --help