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

Trailing Actions

UX4G's search is 56px tall (size='xl') and carries voice-search and assistant actions on the right. The trailing slot takes any node.

UX4G puts voice search and an assistant here. The slot takes any node.

SearchWithTrailingActions

import { Mic, Sparkles } from 'lucide-react';
import { useCallback, useState } from 'react';
import { Search } from '@/components/ui/search';
import { Body3 } from '@/components/ui/typography';

/** Icon button used in the search trailing slot. */
function TrailingAction({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <button
      type='button'
      className='text-neutral-600 hover:text-primary shrink-0 rounded-md p-2 transition-colors focus-visible:outline-none'
      aria-label={label}
    >
      {children}
    </button>
  );
}

export default function Component() {
  return (
    <div className='grid w-full max-w-md gap-2'>
      <Search
        size='xl'
        placeholder='Search for services'
        trailing={
          <>
            <TrailingAction label='Search by voice'>
              <Mic className='size-6' aria-hidden />
            </TrailingAction>
            <TrailingAction label='Ask the assistant'>
              <Sparkles className='size-6' aria-hidden />
            </TrailingAction>
          </>
        }
      />
      <Body3 className='text-neutral-600'>
        UX4G puts voice search and an assistant here. The slot takes any node.
      </Body3>
    </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