Forms & Inputs

Search Bar

Search input with two sizes (Small 34px / Default 48px) and four states: Default, Active (arrow + cursor), Typing (violet border + clear), Searched. Mic section is separated by a vertical divider.

V 1.0View in Storybook

Controls

Size

State

showMic

Variants

Small — all 4 statesDefault · Active · Typing · Searched

Default — all 4 statesDefault · Active · Typing · Searched

Without MicshowMic={false} — both sizes

Props

Name

Type

Default

size

'default' | 'small'

'default'

state

'default' | 'active' | 'typing' | 'searched'

'default'

placeholder

string

'Search for products, brands . .'

value

string

—

onChange

(value: string) => void

—

onSearch

(value: string) => void

—

onBack

() => void

—

showMic

boolean

true

Code

import { SearchBar } from '@/src/components/SearchBar/SearchBar'

// Default (interactive — state changes on focus/type/blur)
<SearchBar placeholder="Search for products, brands . ." />

// Controlled with explicit state
<SearchBar state="typing" value="Apple" onChange={setValue} />

// Small, no mic
<SearchBar size="small" showMic={false} />