Search field
Search fields allow users to search and filter content. They include a search icon and support autocomplete suggestions and clear functionality.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop label | Type ReactNode | Default value "" | Description Label text or content displayed above or beside the search field |
Prop placeholder | Type string | Default value "" | Description Placeholder text displayed when the search field is empty |
Prop showClearButton | Type boolean | Default value false | Description Whether to show a clear button when the field has content |
Prop options | Type Array<string> | Default value [] | Description Array of autocomplete options to suggest as the user types |
Prop size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the search field |
Prop error | Type boolean | Default value false | Description Whether the field is in an error state, typically shown with red styling |
Prop disabled | Type boolean | Default value false | Description Whether the field is disabled and cannot be interacted with |
Quick start
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'
function MySearchField() {
const [value, setValue] = useState('')
return (
<SearchField
id="search"
label="Search"
placeholder="Search..."
onChange={(value, e) => setValue(value)}
/>
)
}Related components
- TextField: For basic text input without search icon.
- AutoComplete: For searchable dropdowns with autocomplete.
- Button: Often used alongside search fields for search actions.
- Container: For organizing search fields within layouts.
Common use cases
Global search
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'
function GlobalSearch() {
const [query, setQuery] = useState('')
return (
<SearchField
id="search"
label="Search"
placeholder="Search everything..."
onChange={(value, e) => setQuery(value)}
showClearButton
/>
)
}Filter search
import { SearchField, Container } from '@clickhouse/click-ui'
import { useState } from 'react'
function FilterSearch() {
const [filter, setFilter] = useState('')
return (
<SearchField
id="filter"
label="Filter"
placeholder="Filter by name..."
onChange={(value, e) => setFilter(value)}
showClearButton
/>
)
}With autocomplete
import { SearchField } from '@clickhouse/click-ui'
import { useState } from 'react'
function AutocompleteSearch() {
const [query, setQuery] = useState('')
return (
<SearchField
id="search"
label="Search with suggestions"
placeholder="Search..."
options={['Apple', 'Banana', 'Orange']}
onChange={(value, e) => setQuery(value)}
/>
)
}