> Select

Select

Sélecteur mono-valeur natif avec label, hint et états d'erreur/succès.

TagsuiExemples2StylesDisponibles

Default

Sélection

export const Default = () => {
  const [value, setValue] = useState<string | null>(null);
  return (
    <Box display="flex" flexDirection="column" gap={24}>
      <Select label="Sélection" placeholder="Choisir..." options={OPTIONS} value={value} onChange={setValue} />
    </Box>
  );
};

States

Avec valeur

Erreur

Ce champ est requis

Succès

Valide

Désactivé

export const States = () => (
  <Box display="flex" flexDirection="column" gap={24}>
    <Select label="Avec valeur" options={OPTIONS} value="b" />
    <Select label="Erreur" options={OPTIONS} value={null} error="Ce champ est requis" />
    <Select label="Succès" options={OPTIONS} value="a" success="Valide" />
    <Select label="Désactivé" options={OPTIONS} value="a" disabled />
  </Box>
);

Alveole UI Kit — v1.8.4