Input

Campo de entrada de texto para entrada de datos del usuario con estados de validación y opciones de personalización.

Importar

import { Input } from 'asterui'

Ejemplos

Input Básico

Campo de entrada de texto simple.

</>

import { Input } from 'asterui'

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

export default App

Tamaños

Cinco tamaños: xs, sm, md (predeterminado), lg y 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

Colores

Diferentes variantes de color para énfasis 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 con borde y 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 formateada con patrón 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 con 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

Deshabilitado

Estado de input deshabilitado.

</>

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 Limpiar

Input con botón de limpiar.

</>

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

Prefijo y Sufijo

Input con iconos de prefijo y sufijo.

</>

🔍

👤

@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

Estado de Validación

Input con estado de validación para retroalimentación de formulario.

</>

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

Etiqueta Flotante

Input con etiqueta flotante animada que se mueve arriba cuando está enfocado o lleno.

</>

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

Complementos

Input con texto o elementos antes/después (fuera del 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

Propiedad	Descripción	Tipo	Predeterminado
type	Tipo de input HTML	'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'	'text'
size	Tamaño de input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Variante de color de input	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
status	Estado de validación (establece aria-invalid)	'error' | 'warning'	-
ghost	Variante ghost (transparente)	boolean	false
bordered	Mostrar borde (establece en false para eliminar)	boolean	true
allowClear	Mostrar botón de limpiar cuando el input tiene valor	boolean | { clearIcon?: ReactNode }	false
onClear	Callback cuando se hace clic en el botón de limpiar	() => void	-
prefix	Icono o elemento de prefijo (dentro del input)	React.ReactNode	-
suffix	Icono o elemento de sufijo (dentro del input)	React.ReactNode	-
addonBefore	Texto/elemento antes del input (fuera, usando label de DaisyUI)	React.ReactNode	-
addonAfter	Texto/elemento después del input (fuera, usando label de DaisyUI)	React.ReactNode	-
floatingLabel	Texto de etiqueta flotante (usa floating-label de DaisyUI)	string	-
mask	Patrón de máscara de input. Usa # para dígitos, A para letras, * para alfanumérico	string	-
maskPlaceholder	Carácter de marcador de posición mostrado en la máscara	string	'_'
errorId	ID del elemento de mensaje de error (para aria-describedby)	string	-
disabled	Estado deshabilitado	boolean	false
placeholder	Texto de marcador de posición	string	-
value	Valor del input	string	-
onChange	Manejador de evento de cambio	(e: React.ChangeEvent<HTMLInputElement>) => void	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa elemento <input> nativo para soporte de teclado adecuado
• El estado deshabilitado se comunica apropiadamente a tecnologías asistivas
• El botón de limpiar tiene aria-label para lectores de pantalla
• Usa status="error" para establecer aria-invalid automáticamente
• Usa errorId para vincular el input al mensaje de error a través de aria-describedby
• Los estados de enfoque son claramente visibles para navegación por teclado