Search

Search input for page content, with clear, loading, and search button support.

Basic Usage

import { Search } from '@airo-ui/react'

function Demo() {
  return <Search placeholder="Search components..." />
}

Size

<Search size="sm" placeholder="Small search" />
<Search size="md" placeholder="Default search" />
<Search size="lg" placeholder="Large search" />

Controlled Value

import { useState } from 'react'

function Demo() {
  const [value, setValue] = useState('Clearable text')

  return <Search value={value} onChange={setValue} />
}

Search Button

Set searchButton to show a search button. Pass a string to customize the button text.

<Search searchButton placeholder="Icon search button" />
<Search searchButton="Search" placeholder="Text search button" />
<Search searchButton="Find" size="sm" placeholder="Small search button" />

Loading State

<Search loading value="Searching..." />

Disabled

<Search disabled value="Disabled" />

API

Props

Name	Type	Default	Description
value	string	''	Controlled value
placeholder	string	'Search...'	Placeholder text
disabled	boolean	false	Disabled
clearable	boolean	true	Show clear button
loading	boolean	false	Loading state
size	'sm' | 'md' | 'lg'	'md'	Size
searchButton	boolean | string	false	Show search button; pass string to customize
onChange	(value: string) => void	--	Value change handler
onSearch	(value: string) => void	--	Triggered on Enter or search button click
onClear	() => void	--	Clear button click handler
onFocus	(e: FocusEvent<HTMLInputElement>) => void	--	Focus handler
onBlur	(e: FocusEvent<HTMLInputElement>) => void	--	Blur handler