import { SearchInput } from "@/components/ui/cn/search-input/SearchInput";

export function SearchInputExample() {
  return (
    <SearchInput size="sm" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`string`	—	Valor controlado
`defaultValue`	`string`	—	Valor inicial
`onChange`	`(value: string) => void`	—	Callback ao digitar
`onSearch`	`(value: string) => void`	—	Callback ao submeter (Enter)
`placeholder`	`string`	`'Search…'`	Placeholder
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do campo
`shortcut`	`string`	—	Atalho de teclado exibido (ex: '⌘K')
`loading`	`boolean`	`false`	Exibir spinner de carregamento
`disabled`	`boolean`	`false`	Desabilitar campo
`className`	`string`	—	Classes CSS extras
`style`	`CSSProperties`	—	Estilos inline pro container

Voltar para Inputs

Carregando…

CN InputsSearch Input

Search Input

Inputs

Search field with magnifier icon, clear button, shortcut hint and loading state.

UnificadosGrowing Search

Search Input — clear button, loading, shortcut hint

⌘K

Growing Search

Unificado

Pill que expande no foco + glow ao pressionar Enter

Instalação via CLI

$ npx kikitocn add search-input

Exemplo de uso

Search InputExample.tsx

import { SearchInput } from "@/components/ui/cn/search-input/SearchInput";

export function SearchInputExample() {
  return (
    <SearchInput size="sm" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`value`	`string`	—	Valor controlado
`defaultValue`	`string`	—	Valor inicial
`onChange`	`(value: string) => void`	—	Callback ao digitar
`onSearch`	`(value: string) => void`	—	Callback ao submeter (Enter)
`placeholder`	`string`	`'Search…'`	Placeholder
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do campo
`shortcut`	`string`	—	Atalho de teclado exibido (ex: '⌘K')
`loading`	`boolean`	`false`	Exibir spinner de carregamento
`disabled`	`boolean`	`false`	Desabilitar campo
`className`	`string`	—	Classes CSS extras
`style`	`CSSProperties`	—	Estilos inline pro container

Voltar para Inputs

Search Input — clear button, loading, shortcut hint

⌘K

Pill que expande no foco + glow ao pressionar Enter

Kikito - TV