Brickslab.

@brickslab/ui-web

Select natif contrôlé avec apparence personnalisée via appearance: none et chevron FiChevronDown. Supporte label, placeholder, textes d'aide et d'erreur, 3 tailles, options désactivées. Accessibilité et keyboard natifs, sans 'use client' dans ui-web.

Aperçu

select basique · avec placeholder

sans placeholder
avec placeholder

Tailles

sm (28px) · md (38px) · lg (44px)

sm
md
lg

Placeholder

option grisée initiale, visible quand value === ""

États

error · disabled · option disabled

error

Vous devez sélectionner un rôle.

disabled
option disabled (Portugal)

Portugal désactivé dans la liste.

Label et texte d'aide

label · helperText · required (astérisque)

Le rôle détermine les permissions accordées.

Pleine largeur

fullWidth — s'étire à 100% du conteneur

Props

PropTypeDéfautRequisDescription
valuestring—✓Valeur contrôlée du select.
onChange(value: string) => void—✓Callback déclenché à la sélection, reçoit la valeur string de l'option.
optionsSelectOption[]—✓Liste des options : { value, label, disabled? }.
labelstring——Label affiché au-dessus du select, lié via htmlFor.
placeholderstring——Option grisée initiale affichée quand aucune valeur n'est sélectionnée (value = "").
helperTextstring——Texte d'aide affiché sous le select (en muted). Masqué si errorText est présent.
errorTextstring——Message d'erreur affiché sous le select (en rouge). Active aussi la bordure rouge.
disabledbooleanfalse—Désactive le select (opacité 0.5, curseur not-allowed).
size"sm" | "md" | "lg""md"—Taille du select (hauteur, padding, taille de police).
fullWidthbooleanfalse—Étire le select à 100% de la largeur du conteneur.
idstring——ID HTML du select. Auto-généré via React.useId() si non fourni.
namestring——Nom du champ pour les formulaires HTML natifs.
requiredbooleanfalse—Marque le champ comme requis (astérisque rouge sur le label).

Utilisation

tsx
import { Select, type SelectOption } from "@brickslab/ui-web";

const options: SelectOption[] = [
  { value: "apple", label: "Pomme" },
  { value: "banana", label: "Banane" },
  { value: "cherry", label: "Cerise" },
];

// Basique
<Select value={val} onChange={setVal} options={options} />

// Avec placeholder
<Select
  value={val}
  onChange={setVal}
  options={options}
  placeholder="Choisir un fruit..."
/>

// Avec label et helper
<Select
  value={country}
  onChange={setCountry}
  options={countryOptions}
  label="Pays"
  helperText="Sélectionnez votre pays de résidence."
/>

// Erreur
<Select
  value={role}
  onChange={setRole}
  options={roleOptions}
  label="Rôle"
  errorText="Ce rôle n'est pas disponible."
/>

// Tailles
<Select size="sm" value={v} onChange={setV} options={options} />
<Select size="md" value={v} onChange={setV} options={options} />
<Select size="lg" value={v} onChange={setV} options={options} />

// Full width
<Select fullWidth value={v} onChange={setV} options={options} label="Pays" />