Inputs
SearchInput
The search field (Figma "Search Input" 2056:52176): magnifier, the query, then the ⌘K hint while empty or a clear button once filled (Esc clears too).
A native type="search" input (role searchbox). No error or read-only state by design: no results is the list's empty state.
<SearchInput aria-label="Buscar" placeholder="Buscar e-mail, uid, conta ou telefone" shortcut="⌘K" value={q} onValueChange={setQ} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Search Input
string
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Size · md
| Default | Hover | Focus | Filled | Disabled |
|---|---|---|---|---|
⌘K | ⌘K | ⌘K | ⌘K |
Size · touch
| Default | Hover | Focus | Filled | Disabled |
|---|---|---|---|---|
⌘K | ⌘K | ⌘K | ⌘K |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value? | string | — | |
| defaultValue? | string | "" | |
| onValueChange? | ((value: string) => void) | — | |
| size? | "md" | "touch" | "md" | md = 40 (desktop, backoffice), touch = 48 (phone). |
| shortcut? | string | — | The keyboard hint shown while empty, e.g. "⌘K". Decorative: the screen that binds the shortcut announces it. |
| showShortcut? | boolean | true | Figma "showShortcut". |
| onClear? | (() => void) | — | Called after the clear button (or Esc) empties the field. |
| clearLabel? | string | "Limpar busca" | Accessible name of the clear button. |
| className? | string | — | |
| disabled? | boolean | — | |
| onKeyDown? | ((event: BaseUIEvent<React.KeyboardEvent<HTMLInputElement>>) => void) | — | |
| ref? | Ref<HTMLInputElement> | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |