Brickslab.

@brickslab/ui-web

Champ de recherche contrôlé avec placeholder et callback de soumission. Composant entièrement contrôlé : la valeur et les changements sont gérés par le parent via value et onChange.

Aperçu

avec onClear et elevated

value="" (live)

sans onClear (pas de bouton ✕)

value="TextCard" (pré-rempli)

Props

PropTypeDéfautRequisDescription
valuestring—✓Valeur courante du champ de recherche. Composant contrôlé.
onChange(value: string) => void—✓Callback déclenché à chaque changement de valeur dans le champ.
placeholderstring——Texte indicatif affiché quand le champ est vide.
onSubmit() => void——Callback optionnel déclenché lors de la soumission (touche Entrée ou bouton de recherche).
onClear() => void——Affiche un bouton ✕ quand value est non vide. Déclenché au clic pour réinitialiser la valeur.
elevatedboolean——Utilise var(--c-surface-elevated) comme fond au lieu de var(--c-surface). Utile dans les barres d'outils sur fond de surface.

Utilisation

tsx
import { SearchBar } from "@brickslab/ui-web";
import { useState } from "react";

function Demo() {
  const [query, setQuery] = useState("");

  return (
    <SearchBar
      value={query}
      onChange={setQuery}
      onClear={() => setQuery("")}
      placeholder="Rechercher un composant..."
      elevated
    />
  );
}