Input

Champ de saisie de texte pour l’entrée de données utilisateur avec états de validation et options de personnalisation.

Import

import { Input } from 'asterui'

Exemples

Input basique

Champ de saisie de texte simple.

</>

import { Input } from 'asterui'

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

export default App

Tailles

Cinq tailles : xs, sm, md (par défaut), lg et 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

Couleurs

Différentes variantes de couleur pour l'emphase visuelle.

</>

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

Types d'input

Différents types d'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

Styles avec bordure et fantôme.

</>

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

Masque d'input

Saisie formatée avec motif de masquage.

</>

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 contrôlé

Input avec état contrôlé.

</>

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

Désactivé

État d'input désactivé.

</>

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

Autoriser l'effacement

Input avec bouton d'effacement.

</>

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

Préfixe et suffixe

Input avec icônes de préfixe et suffixe.

</>

🔍

👤

@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

Statut de validation

Input avec statut de validation pour le retour de formulaire.

</>

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

Étiquette flottante

Input avec étiquette flottante animée qui se déplace vers le haut lors de la mise au point ou du remplissage.

</>

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

Compléments

Input avec texte ou éléments avant/après (à l'extérieur du champ de saisie).

</>

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

Propriété	Description	Type	Par défaut
type	Type d’input HTML	'text' | 'password' | 'email' | 'number' | 'date' | 'datetime-local' | 'week' | 'month' | 'tel' | 'url' | 'search' | 'time'	'text'
size	Taille de l’input	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
color	Variante de couleur de l’input	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
status	Statut de validation (définit aria-invalid)	'error' | 'warning'	-
ghost	Variante fantôme (transparente)	boolean	false
bordered	Afficher la bordure (définir sur false pour supprimer)	boolean	true
allowClear	Afficher le bouton d’effacement lorsque l’input a une valeur	boolean | { clearIcon?: ReactNode }	false
onClear	Callback lorsque le bouton d’effacement est cliqué	() => void	-
prefix	Icône ou élément de préfixe (à l’intérieur de l’input)	React.ReactNode	-
suffix	Icône ou élément de suffixe (à l’intérieur de l’input)	React.ReactNode	-
addonBefore	Texte/élément avant l’input (à l’extérieur, utilisant le label DaisyUI)	React.ReactNode	-
addonAfter	Texte/élément après l’input (à l’extérieur, utilisant le label DaisyUI)	React.ReactNode	-
floatingLabel	Texte d’étiquette flottante (utilise floating-label DaisyUI)	string	-
mask	Motif de masque d’input. Utilisez # pour les chiffres, A pour les lettres, * pour alphanumérique	string	-
maskPlaceholder	Caractère d’espace réservé affiché dans le masque	string	'_'
errorId	ID de l’élément de message d’erreur (pour aria-describedby)	string	-
disabled	État désactivé	boolean	false
placeholder	Texte d’espace réservé	string	-
value	Valeur de l’input	string	-
onChange	Gestionnaire d’événement de changement	(e: React.ChangeEvent<HTMLInputElement>) => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise l’élément natif <input> pour un support clavier approprié
• L’état désactivé est correctement communiqué aux technologies d’assistance
• Le bouton d’effacement a un aria-label pour les lecteurs d’écran
• Utilisez status="error" pour définir automatiquement aria-invalid
• Utilisez errorId pour lier l’input au message d’erreur via aria-describedby
• Les états de focus sont clairement visibles pour la navigation au clavier