Growing Search

Inputs

Icon-only search pill that expands on focus and pulses a glow on Enter.

Pill que expande no foco + glow ao pressionar Enter

Instalação via CLI

$ npx kikitocn add growing-search

Interno:

@/lib/utilssonner

Exemplo de uso

Growing SearchExample.tsx

import { GrowingSearch } from "@/components/ui/cn/growing-search/GrowingSearch";

export function GrowingSearchExample() {
  return (
    <GrowingSearch />
  );
}

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
`showToast`	`boolean`	`true`	Exibe um toast (sonner) ao buscar
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline extras

Voltar para Inputs

Carregando…