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

export function SearchInputExample() {
  return (
    <SearchInput />
  );
}

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`	`'Buscar...'`	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

Voltar para Inputs

Carregando…

CN InputsSearch Input

Search Input

Inputs

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

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/search-input

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 />
  );
}

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`	`'Buscar...'`	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

Voltar para Inputs

Kikito - TV