Input

Text input field for user data entry with validation states and customization options.

Import

import { Input } from 'asterui'

Examples

Basic Input

Simple text input field.

</>

import { Input } from 'asterui'

function App() {
  return (
      <Input placeholder="Enter text..." />
    )
}

export default App

Sizes

Five sizes: xs, sm, md (default), lg, and xl.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input size="xs" placeholder="Extra small" />
        <Input size="sm" placeholder="Small" />
        <Input size="md" placeholder="Medium (default)" />
        <Input size="lg" placeholder="Large" />
        <Input size="xl" placeholder="Extra large" />
      </Space>
    )
}

export default App

Colors

Different color variants for visual emphasis.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input color="primary" placeholder="Primary" />
        <Input color="secondary" placeholder="Secondary" />
        <Input color="accent" placeholder="Accent" />
        <Input color="info" placeholder="Info" />
        <Input color="success" placeholder="Success" />
        <Input color="warning" placeholder="Warning" />
        <Input color="error" placeholder="Error" />
      </Space>
    )
}

export default App

Input Types

Different HTML input types.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input type="text" placeholder="Text input" />
        <Input type="email" placeholder="Email input" />
        <Input type="password" placeholder="Password input" />
        <Input type="number" placeholder="Number input" />
        <Input type="tel" placeholder="Telephone input" />
        <Input type="url" placeholder="URL input" />
        <Input type="search" placeholder="Search input" />
      </Space>
    )
}

export default App

Variants

Bordered and ghost styles.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input placeholder="Default bordered" />
        <Input bordered={false} placeholder="Without border" />
        <Input ghost placeholder="Ghost variant" />
      </Space>
    )
}

export default App

Input Mask

Formatted input with masking pattern.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input mask="(###) ###-####" placeholder="Phone number" />
        <Input mask="####-####-####-####" placeholder="Credit card" />
        <Input mask="##/##/####" placeholder="Date (MM/DD/YYYY)" />
        <Input mask="**-####" placeholder="License plate (AB-1234)" />
      </Space>
    )
}

export default App

Controlled Input

Input with controlled state.

</>

Value: (empty)

import { Input, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('')
  
  return (
      <Space direction="vertical" size="sm">
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Type something..."
        />
        <div className="text-sm text-base-content/70">
          Value: {value || '(empty)'}
        </div>
      </Space>
    )
}

export default App

Disabled

Disabled input state.

</>

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input placeholder="Normal input" />
        <Input placeholder="Disabled input" disabled />
        <Input value="Disabled with value" disabled />
      </Space>
    )
}

export default App

Allow Clear

Input with clear button.

</>

import { Input } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('Clear me!')
  
  return (
      <Input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        allowClear
        placeholder="Type then clear..."
      />
    )
}

export default App

Prefix & Suffix

Input with prefix and suffix icons.

</>

🔍

👤

@gmail.com

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Input prefix={<span>🔍</span>} placeholder="Search..." />
        <Input prefix={<span>👤</span>} placeholder="Username" />
        <Input suffix="@gmail.com" placeholder="Email" />
      </Space>
    )
}

export default App

Validation Status

Input with validation status for form feedback.

</>

This field is required

Please verify this value

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <div>
          <Input status="error" placeholder="Error status" errorId="error-msg" />
          <p id="error-msg" className="text-error text-sm mt-1">This field is required</p>
        </div>
        <div>
          <Input status="warning" placeholder="Warning status" />
          <p className="text-warning text-sm mt-1">Please verify this value</p>
        </div>
      </Space>
    )
}

export default App

Floating Label

Input with animated floating label that moves above when focused or filled.

</>

EmailPassword

import { Input, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  
  return (
      <Space direction="vertical" size="md">
        <Input
          floatingLabel="Email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Input
          floatingLabel="Password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </Space>
    )
}

export default App

Addons

Input with text or elements before/after (outside the input field).

</>

https://.com$.00

import { Input, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <Input addonBefore="https://" placeholder="your-site.com" />
        <Input addonAfter=".com" placeholder="username" />
        <Input addonBefore="$" addonAfter=".00" placeholder="0" />
      </Space>
    )
}

export default App

API

Input

Property	Description	Type	Default
type	HTML input type	'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'	'text'
size	Input size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Input color variant	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
status	Validation status (sets aria-invalid)	'error' | 'warning'	-
ghost	Ghost variant (transparent)	boolean	false
bordered	Show border (set to false to remove)	boolean	true
allowClear	Show clear button when input has value	boolean | { clearIcon?: ReactNode }	false
onClear	Callback when clear button is clicked	() => void	-
prefix	Prefix icon or element (inside input)	React.ReactNode	-
suffix	Suffix icon or element (inside input)	React.ReactNode	-
addonBefore	Text/element before input (outside, using DaisyUI label)	React.ReactNode	-
addonAfter	Text/element after input (outside, using DaisyUI label)	React.ReactNode	-
floatingLabel	Floating label text (uses DaisyUI floating-label)	string	-
mask	Input mask pattern. Use # for digits, A for letters, * for alphanumeric	string	-
maskPlaceholder	Placeholder character shown in mask	string	'_'
errorId	ID of error message element (for aria-describedby)	string	-
disabled	Disabled state	boolean	false
placeholder	Placeholder text	string	-
value	Input value	string	-
onChange	Change event handler	(e: React.ChangeEvent<HTMLInputElement>) => void	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Uses native <input> element for proper keyboard support
• Disabled state is properly communicated to assistive technologies
• Clear button has aria-label for screen readers
• Use status="error" to set aria-invalid automatically
• Use errorId to link input to error message via aria-describedby
• Focus states are clearly visible for keyboard navigation