> TextField

TextField

Champ de saisie texte avec label, hint, caption d'erreur et de succès.

TagsuiExemples2StylesDisponibles

Default

Label

Avec valeur

Avec hint

Texte d'aide

export const Default = () => (
  <Box display="flex" flexDirection="column" gap={24}>
    <TextField label="Label" placeholder="Placeholder" />
    <TextField label="Avec valeur" value="Valeur saisie" />
    <TextField label="Avec hint" hint="Texte d'aide" placeholder="Placeholder" />
  </Box>
);

States

Erreur

Ce champ est requis

Succès

Enregistré

Désactivé

Désactivé avec valeur

export const States = () => (
  <Box display="flex" flexDirection="column" gap={24}>
    <TextField label="Erreur" placeholder="Placeholder" error="Ce champ est requis" />
    <TextField label="Succès" placeholder="Placeholder" success="Enregistré" />
    <TextField label="Désactivé" placeholder="Placeholder" disabled />
    <TextField label="Désactivé avec valeur" value="Valeur" disabled />
  </Box>
);

Alveole UI Kit — v1.8.4