Select
Select components allow users to choose from a list of predefined options in dropdown menus. They support single and multiple selection, search, and various states.
Example
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop id | Type string | Default value undefined | Description Unique identifier for the select element. Auto-generated if not provided. |
Prop label | Type ReactNode | Default value "" | Description Label text or content displayed above or beside the select field |
Prop options | Type Array<{ value: string, label: string }> | Default value [] | Description Array of option objects, each with a value and label property |
Prop value | Type string | Default value undefined | Description Currently selected value. Required for controlled components. |
Prop onSelect | Type (value: string) => void | Default value undefined | Description Callback when an option is selected. Receives the selected value. |
Prop size | Type "sm" | "md" | "lg" | Default value "md" | Description Size variant of the select field |
Prop error | Type boolean | Default value false | Description Whether the select is in an error state, typically shown with red styling |
Prop disabled | Type boolean | Default value false | Description Whether the select is disabled and cannot be interacted with |
Prop isMulti | Type boolean | Default value false | Description Whether multiple options can be selected at once |
Prop placeholder | Type string | Default value undefined | Description Placeholder text displayed when no option is selected |
Prop useFullWidthItems | Type boolean | Default value false | Description Whether select items should take up the full width of the dropdown |
Prop itemCharacterLimit | Type string | Default value undefined | Description Maximum character limit for item labels in the dropdown |
Prop showSearch | Type boolean | Default value false | Description Whether to show a search input field in the dropdown |
Prop orientation | Type "horizontal" | "vertical" | Default value undefined | Description Layout orientation for select options |
Prop maxHeight | Type string | Default value undefined | Description Maximum height of the dropdown menu (e.g., "300px", "50vh") |
Prop noAvailableOptions | Type boolean | function | Default value false | Description Controls rendering when no options are available. Can be a boolean or a function that returns custom content: (props: { search: string, onClose: () => void }) => ReactNode |
Prop allowCreateOption | Type boolean | Default value false | Description Whether users can create new options by typing |
Quick start
Select is a controlled component - manage state with useState:
const [value, setValue] = useState('')
<Select
id="status"
label="Status"
value={value}
onSelect={setValue}
options={[
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]}
/>Related components
- TextField: Use alongside Select for form inputs
- Label: Use with Select for accessible form labels
- Container: Use to layout Select with other form fields
- Button: Use with Select for form submission
- Dialog: Use Select inside Dialog for modal forms
Common use cases
Basic select
import { Select } from '@clickhouse/click-ui'
import { useState } from 'react'
function BasicSelect() {
const [status, setStatus] = useState('')
return (
<Select
id="status-select"
label="Status"
value={status}
onSelect={setStatus}
options={[
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]}
/>
)
}Form with Select
import { Select, Container } from '@clickhouse/click-ui'
import { useState } from 'react'
function FormWithSelect() {
const [role, setRole] = useState('')
return (
<Container orientation='vertical' gap='md'>
<Select
id="role-select"
label="Role"
value={role}
onSelect={setRole}
options={[
{ label: 'Admin', value: 'admin' },
{ label: 'User', value: 'user' },
]}
/>
</Container>
)
}Multiple select
import { Select } from '@clickhouse/click-ui'
import { useState } from 'react'
function MultiSelect() {
const [values, setValues] = useState([])
return (
<Select
id="tags-select"
label="Tags"
isMulti
options={[
{ label: 'React', value: 'react' },
{ label: 'TypeScript', value: 'typescript' },
]}
/>
)
}