Composant · Formulaire

Search

Stable

Champ de recherche avec icône loupe, bouton clear et tailles sm/md/lg, basé sur `<input type="search">` et icônes Lucide.

Exemples

Tailles

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Search size="sm" placeholder="Rechercher (sm)" />
  <Search size="md" placeholder="Rechercher (md)" />
  <Search size="lg" placeholder="Rechercher (lg)" />
</div>

États

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Search placeholder="Rechercher un composant…" />
  <Search placeholder="Champ désactivé" disabled />
</div>

Liaison bidirectionnelle

Voir le code (Svelte)

<Search
  value="design"
  defaultValue="design"
  modelValue="design"
  placeholder="Tapez puis effacez"
/>

Valeur courante : design

API

Prop	Type	Default
`value`	`string` (`$bindable`)	`""`
`placeholder`	`string`	`"Search"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`clearLabel`	`string`	`"Clear search"`
`disabled`	`boolean`	`false`

Le composant rend un <input type="search"> natif (rôle searchbox implicite), accompagné d'une icône Lucide Search et d'un bouton clear (icône Lucide X) affiché dès que value n'est pas vide. La remise à zéro se fait via bind:value : le bouton clear assigne value = "", ce qui propage la mise à jour au parent sans callback dédié.

Tokens utilisés

--st-component-control-hoverBorder
--st-component-control-hoverBackground