Search — Sinapse Design System

Default

Ícone search à esquerda, placeholder/valor em azul (secondary). Hover muda border, não bg.

<Search placeholder="Pesquisar pacientes..." />

<template>
<div class="relative w-full">
  <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">search</span>
  <input type="search" class="itps-input pl-10" placeholder="Pesquisar pacientes..." />
</div>
</template>

<div className="relative w-full">
<span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">search</span>
<input type="search" className="itps-input pl-10" placeholder="Pesquisar pacientes..." />
</div>

<div class="relative w-full">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">search</span>
<input type="search" class="itps-input pl-10" placeholder="Pesquisar pacientes..." />
</div>

Sizes

Três alturas alinhadas ao token form-height.

<Search size="sm" placeholder="Small (40px)" />
<Search size="md" placeholder="Medium (48px)" />
<Search size="lg" placeholder="Large (56px)" />

Com label inline

label aparece como prefix antes do input — “Pesquisar:” em vez de label separado.

Pesquisar:

<Search label="Pesquisar:" placeholder="paciente, CPF ou prontuário" />

Floating (com sombra)

shadow adiciona elevação para uso em surfaces destacadas (ex: hero, command palette).

<Search shadow placeholder="O que você precisa hoje?" />

Comportamento

Botão close aparece automático quando input tem valor (CSS :placeholder-shown)
Click no close limpa input + dispatcha eventos input e change para listeners externos
Input nativo do tipo search (browser pode adicionar histórico)

Props

Prop	Tipo	Default	Descrição
`id`	`string`	auto	ID do `<input>`.
`name`	`string`	—	name HTML para form submit.
`value`	`string`	—	Valor inicial.
`placeholder`	`string`	`'Pesquisar...'`	Texto guia.
`label`	`string`	—	Label inline antes do input.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura.
`shadow`	`boolean`	`false`	Modo floating com sombra.
`class`	`string`	—	Classes adicionais.