Introduction

The Search component provides a styled search input with a leading search icon, clear button, and multiple size variants.

Installation

import { Search } from '@/components/ui/search';

Usage

<Search placeholder="Search..." value={value} onChange={handleChange} onClear={handleClear} />

Examples

Default

SearchDefault

import { useState } from 'react';
import { Search } from '@/components/ui/search';

export default function Component() {
  const [value, setValue] = useState('');
  return <Search placeholder="Search..." value={value} onChange={(e) => setValue(e.target.value)} onClear={() => setValue('')} />;
}

Sizes

SearchSizes

import { Search } from '@/components/ui/search';

export default function Component() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Search placeholder="Small..." size="sm" />
      <Search placeholder="Medium..." size="md" />
      <Search placeholder="Large..." size="lg" />
    </div>
  );
}

API Reference

Search

Prop	Type	Default	Description
`size`	`sm \| md \| lg`	`md`	Input size
`onClear`	`() => void`	—	Clear button callback
`containerClassName`	`string`	—	Class for the outer wrapper

Search

On this page