Input

Input inclut les styles d'erreur et de desactivation, des icones facultatives, l'affichage du mot de passe et une action de recherche.

Éditeur en direct

function InputExample() {
  const [query, setQuery] = React.useState("");

  return (
    <div className="grid w-full max-w-sm gap-4">
      <Input
        type="search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        onRechercher={() => window.alert(`Recherchering for ${query || "everything"}`)}
        placeholder="Rechercher products"
      />
      <Input type="password" placeholder="Password" />
      <Input error defaultValue="not-an-email" type="email" />
    </div>
  );
}

Résultat

Loading...

import { Input, Search } from "niom-parts";

<Input
  icon={<Search size={16} />}
  iconPosition="left"
  placeholder="Rechercher by product name"
/>

Cas d'utilisation courants

Les champs peuvent gerer des donnees de profil, des valeurs numeriques, des etats en lecture seule et la validation sans modifier leur composition.

Éditeur en direct

function InputUseCases() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      <Input defaultValue="Maya Chen" aria-label="Full name" />
      <Input type="number" min="1" defaultValue="2" aria-label="Quantity" />
      <Input disabled value="Managed by your organization" aria-label="Managed value" readOnly />
      <Input error aria-invalid="true" placeholder="Required field" aria-label="Invalid field" />
    </div>
  );
}

Résultat

Loading...

Proprietes

Input accepte les attributs natifs d'un champ en plus des proprietes suivantes.

Propriete	Type	Valeur par defaut
type	"text" | "password" | "email" | "number" | "search" | "tel" | "url"	"text"
error	boolean	false
icon	ReactNode	-
iconPosition	"left" | "right"	"left"
searchButtonLabel	string	"Rechercher"
onRechercher	MouseEventHandler<HTMLButtonElement>	-
forwardedRef	ForwardedRef<HTMLInputElement>	-
className	string	-