SearchFilterBar
Search input with optional filter dropdown
Default
Usage
tsx
import { SearchFilterBar } from '@tryvienna/ui'
<div className="w-full max-w-lg">
<SearchFilterBar value={search} onChange={setSearch} placeholder="Search items..." />
<p className="mt-4 text-xs text-muted-foreground">Search value: "{search}"</p>
</div>1
2
3
4
5
6
2
3
4
5
6
Examples
Default
Default
tsx
<div className="w-full max-w-lg">
<SearchFilterBar value={search} onChange={setSearch} placeholder="Search items..." />
<p className="mt-4 text-xs text-muted-foreground">Search value: "{search}"</p>
</div>1
2
3
4
2
3
4
With Filter
With Filter
tsx
<div className="w-full max-w-lg">
<SearchFilterBar
value={search}
onChange={setSearch}
placeholder="Search projects..."
filter={{
value: filter,
onChange: setFilter,
placeholder: 'All statuses',
options: [
{ label: 'All Statuses', value: 'all' },
{ label: 'Active', value: 'active' },
{ label: 'Archived', value: 'archived' },
{ label: 'Draft', value: 'draft' },
],
}}
/>
<p className="mt-4 text-xs text-muted-foreground">
Search: "{search}" | Filter: "{filter}"
</p>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Prefilled
Prefilled
tsx
<div className="w-full max-w-lg">
<SearchFilterBar
value={search}
onChange={setSearch}
placeholder="Search..."
filter={{
value: filter,
onChange: setFilter,
placeholder: 'Filter by type',
options: [
{ label: 'All Types', value: 'all' },
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
],
}}
/>
<p className="mt-4 text-xs text-muted-foreground">
Pre-filled search with active filter. Click the X to clear the search.
</p>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
API Reference
SearchFilterBar
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | |
onChange | (value: string) => void | - | |
placeholder | string | - | |
filter | FilterConfig | - | |
autoFocus | boolean | - |
Data Attributes
| Component | data-slot |
|---|---|
SearchFilterBar | "search-filter-bar" |