Input

Input with floating label and error shake animation, suitable for most text input scenarios.

Basic Usage

import { Input } from '@airo-ui/react'
import { useState } from 'react'

function Demo() {
  const [value, setValue] = useState('')

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      label="Username"
      placeholder="Enter username"
    />
  )
}

Error State

On error, the input triggers a horizontal shake animation (spring easing) and shows the error message.

import { useState } from 'react'
import { Input, Button } from '@airo-ui/react'

function Demo() {
  const [value, setValue] = useState('')
  const [hasError, setHasError] = useState(false)

  return (
    <div>
      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        label="Email"
        error={hasError}
        errorMessage="Invalid email format"
      />
      <Button variant="primary" size="sm" onClick={() => {
        setHasError(true)
        setTimeout(() => setHasError(false), 1500)
      }}>
        Trigger Error
      </Button>
    </div>
  )
}

Disabled

<Input label="Disabled" value="Locked" disabled />

API

Props

Name	Type	Default	Description
value	string	--	Controlled value
defaultValue	string	''	Default value (uncontrolled)
type	'text' | 'password' | 'email' | 'number' | 'search'	'text'	Native type
placeholder	string	--	Placeholder text
label	string	--	Floating label text
disabled	boolean	false	Disabled
readonly	boolean	false	Read-only
error	boolean	false	Error state
errorMessage	string	--	Error message text
size	'sm' | 'md' | 'lg'	'md'	Input size
onChange	(e: ChangeEvent<HTMLInputElement>) => void	--	Value change handler
onBlur	(e: FocusEvent<HTMLInputElement>) => void	--	Blur handler
onFocus	(e: FocusEvent<HTMLInputElement>) => void	--	Focus handler