Input

Campo de entrada de texto para entrada de dados do usuário com estados de validação e opções de personalização.

Importação

import { Input } from 'asterui'

Exemplos

Input Básico

Campo de entrada de texto simples.

</>

import { Input } from 'asterui'

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

export default App

Tamanhos

Cinco tamanhos: xs, sm, md (padrão), lg e 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

Cores

Diferentes variantes de cor para ênfase visual.

</>

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

Tipos de Input

Diferentes tipos de input HTML.

</>

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

Variantes

Estilos com borda e ghost.

</>

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

Máscara de Input

Entrada formatada com padrão de máscara.

</>

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

Input Controlado

Input com estado controlado.

</>

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

Desabilitado

Estado de input desabilitado.

</>

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

Permitir Limpar

Input com botão de limpar.

</>

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

Prefixo e Sufixo

Input com ícones de prefixo e sufixo.

</>

🔍

👤

@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

Status de Validação

Input com status de validação para feedback de formulário.

</>

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

Rótulo Flutuante

Input com rótulo flutuante animado que se move para cima quando focado ou preenchido.

</>

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 com texto ou elementos antes/depois (fora do campo de entrada).

</>

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

Propriedade	Descrição	Tipo	Padrão
type	Tipo de input HTML	'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'	'text'
size	Tamanho do input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Variante de cor do input	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
status	Status de validação (define aria-invalid)	'error' | 'warning'	-
ghost	Variante ghost (transparente)	boolean	false
bordered	Mostrar borda (defina como false para remover)	boolean	true
allowClear	Mostrar botão de limpar quando input tem valor	boolean | { clearIcon?: ReactNode }	false
onClear	Callback quando botão de limpar é clicado	() => void	-
prefix	Ícone ou elemento de prefixo (dentro do input)	React.ReactNode	-
suffix	Ícone ou elemento de sufixo (dentro do input)	React.ReactNode	-
addonBefore	Texto/elemento antes do input (fora, usando label DaisyUI)	React.ReactNode	-
addonAfter	Texto/elemento depois do input (fora, usando label DaisyUI)	React.ReactNode	-
floatingLabel	Texto do rótulo flutuante (usa floating-label DaisyUI)	string	-
mask	Padrão de máscara de input. Use # para dígitos, A para letras, * para alfanumérico	string	-
maskPlaceholder	Caractere placeholder mostrado na máscara	string	'_'
errorId	ID do elemento de mensagem de erro (para aria-describedby)	string	-
disabled	Estado desabilitado	boolean	false
placeholder	Texto placeholder	string	-
value	Valor do input	string	-
onChange	Manipulador de evento de mudança	(e: React.ChangeEvent<HTMLInputElement>) => void	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa elemento <input> nativo para suporte adequado de teclado
• Estado desabilitado é comunicado adequadamente para tecnologias assistivas
• Botão de limpar tem aria-label para leitores de tela
• Use status="error" para definir aria-invalid automaticamente
• Use errorId para vincular input à mensagem de erro via aria-describedby
• Estados de foco são claramente visíveis para navegação por teclado