---
title: Select
description: Select components allow users to choose from a list of predefined options in dropdown menus.
category: Forms
related: [TextField, Label, Container, Button, Dialog]
commonPatterns: [form-select, filter-select, controlled-select]
---

Source: https://clickhouse.design/click-ui/select

# 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                                                                                                                                                                  |
| ------------------ | ----------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id                 | `string`                                  | `undefined`   | Unique identifier for the select element. Auto-generated if not provided.                                                                                                    |
| label              | `ReactNode`                               | `""`          | Label text or content displayed above or beside the select field                                                                                                             |
| options            | `Array<{ value: string, label: string }>` | `[]`          | Array of option objects, each with a value and label property                                                                                                                |
| value              | `string`                                  | `undefined`   | Currently selected value. Required for controlled components.                                                                                                                |
| onSelect           | `(value: string) => void`                 | `undefined`   | Callback when an option is selected. Receives the selected value.                                                                                                            |
| size               | `"sm" \| "md" \| "lg"`                    | `"md"`        | Size variant of the select field                                                                                                                                             |
| error              | `boolean`                                 | `false`       | Whether the select is in an error state, typically shown with red styling                                                                                                    |
| disabled           | `boolean`                                 | `false`       | Whether the select is disabled and cannot be interacted with                                                                                                                 |
| isMulti            | `boolean`                                 | `false`       | Whether multiple options can be selected at once                                                                                                                             |
| placeholder        | `string`                                  | `undefined`   | Placeholder text displayed when no option is selected                                                                                                                        |
| useFullWidthItems  | `boolean`                                 | `false`       | Whether select items should take up the full width of the dropdown                                                                                                           |
| itemCharacterLimit | `string`                                  | `undefined`   | Maximum character limit for item labels in the dropdown                                                                                                                      |
| showSearch         | `boolean`                                 | `false`       | Whether to show a search input field in the dropdown                                                                                                                         |
| orientation        | `"horizontal" \| "vertical"`              | `undefined`   | Layout orientation for select options                                                                                                                                        |
| maxHeight          | `string`                                  | `undefined`   | Maximum height of the dropdown menu (e.g., "300px", "50vh")                                                                                                                  |
| noAvailableOptions | `boolean \| function`                     | `false`       | Controls rendering when no options are available. Can be a boolean or a function that returns custom content: (props: \{ search: string, onClose: () => void }) => ReactNode |
| allowCreateOption  | `boolean`                                 | `false`       | Whether users can create new options by typing                                                                                                                               |

```tsx
import { Select } from '@clickhouse/click-ui'

<Select 
id="example"
label="Status"
value={value}
onSelect={setValue}
options={[
  { label: 'Active', value: 'active' },
  { label: 'Inactive', value: 'inactive' },
]}
/>
```

## Quick start

Select is a controlled component - manage state with useState:

```tsx
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

```tsx
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

```tsx
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

```tsx
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' },
    ]}
  />
)
}
```

## Variants

### States

**Basic Select**

**Error Select**

**Disabled Select**