# Select

Dropdown control for selecting a value from a list

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import * as React from "react"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@databricks/appkit-ui/react"

export default function SelectExample() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

```

## Select[​](#select-1 "Direct link to Select")

Dropdown control for selecting a value from a list

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props "Direct link to Props")

| Prop            | Type                        | Required | Default | Description |
| --------------- | --------------------------- | -------- | ------- | ----------- |
| `open`          | `boolean`                   |          | -       | -           |
| `defaultOpen`   | `boolean`                   |          | -       | -           |
| `onOpenChange`  | `((open: boolean) => void)` |          | -       | -           |
| `dir`           | `enum`                      |          | -       | -           |
| `name`          | `string`                    |          | -       | -           |
| `autoComplete`  | `string`                    |          | -       | -           |
| `disabled`      | `boolean`                   |          | -       | -           |
| `required`      | `boolean`                   |          | -       | -           |
| `form`          | `string`                    |          | -       | -           |
| `value`         | `string`                    |          | -       | -           |
| `defaultValue`  | `string`                    |          | -       | -           |
| `onValueChange` | `((value: string) => void)` |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Select } from '@databricks/appkit-ui';

<Select /* props */ />

```

## SelectContent[​](#selectcontent "Direct link to SelectContent")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop                     | Type                                                                        | Required | Default  | Description                                                                                                      |
| ------------------------ | --------------------------------------------------------------------------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------- |
| `onCloseAutoFocus`       | `((event: Event) => void)`                                                  |          | -        | Event handler called when auto-focusing on close. Can be prevented.                                              |
| `onEscapeKeyDown`        | `((event: KeyboardEvent) => void)`                                          |          | -        | Event handler called when the escape key is down. Can be prevented.                                              |
| `onPointerDownOutside`   | `((event: PointerDownOutsideEvent) => void)`                                |          | -        | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
| `position`               | `enum`                                                                      |          | `popper` | -                                                                                                                |
| `asChild`                | `boolean`                                                                   |          | -        | -                                                                                                                |
| `align`                  | `enum`                                                                      |          | -        | -                                                                                                                |
| `side`                   | `enum`                                                                      |          | -        | -                                                                                                                |
| `sideOffset`             | `number`                                                                    |          | -        | -                                                                                                                |
| `alignOffset`            | `number`                                                                    |          | -        | -                                                                                                                |
| `arrowPadding`           | `number`                                                                    |          | -        | -                                                                                                                |
| `avoidCollisions`        | `boolean`                                                                   |          | -        | -                                                                                                                |
| `collisionBoundary`      | `Boundary \| Boundary[]`                                                    |          | -        | -                                                                                                                |
| `collisionPadding`       | `number \| Partial<Record<"left" \| "right" \| "top" \| "bottom", number>>` |          | -        | -                                                                                                                |
| `sticky`                 | `enum`                                                                      |          | -        | -                                                                                                                |
| `hideWhenDetached`       | `boolean`                                                                   |          | -        | -                                                                                                                |
| `updatePositionStrategy` | `enum`                                                                      |          | -        | -                                                                                                                |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { SelectContent } from '@databricks/appkit-ui';

<SelectContent /* props */ />

```

## SelectGroup[​](#selectgroup "Direct link to SelectGroup")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { SelectGroup } from '@databricks/appkit-ui';

<SelectGroup /* props */ />

```

## SelectItem[​](#selectitem "Direct link to SelectItem")

Select item component for individual options in a dropdown.

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop        | Type      | Required | Default | Description |
| ----------- | --------- | -------- | ------- | ----------- |
| `value`     | `string`  | ✓        | -       | -           |
| `disabled`  | `boolean` |          | -       | -           |
| `textValue` | `string`  |          | -       | -           |
| `asChild`   | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { SelectItem } from '@databricks/appkit-ui';

<SelectItem /* props */ />

```

## SelectLabel[​](#selectlabel "Direct link to SelectLabel")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-4 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { SelectLabel } from '@databricks/appkit-ui';

<SelectLabel /* props */ />

```

## SelectScrollDownButton[​](#selectscrolldownbutton "Direct link to SelectScrollDownButton")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-5 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { SelectScrollDownButton } from '@databricks/appkit-ui';

<SelectScrollDownButton /* props */ />

```

## SelectScrollUpButton[​](#selectscrollupbutton "Direct link to SelectScrollUpButton")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-6 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { SelectScrollUpButton } from '@databricks/appkit-ui';

<SelectScrollUpButton /* props */ />

```

## SelectSeparator[​](#selectseparator "Direct link to SelectSeparator")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { SelectSeparator } from '@databricks/appkit-ui';

<SelectSeparator /* props */ />

```

## SelectTrigger[​](#selecttrigger "Direct link to SelectTrigger")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-8 "Direct link to Props")

| Prop      | Type      | Required | Default   | Description |
| --------- | --------- | -------- | --------- | ----------- |
| `asChild` | `boolean` |          | -         | -           |
| `size`    | `enum`    |          | `default` | -           |

### Usage[​](#usage-8 "Direct link to Usage")

```tsx
import { SelectTrigger } from '@databricks/appkit-ui';

<SelectTrigger /* props */ />

```

## SelectValue[​](#selectvalue "Direct link to SelectValue")

**Source:** [`packages/appkit-ui/src/react/ui/select.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/select.tsx)

### Props[​](#props-9 "Direct link to Props")

| Prop          | Type        | Required | Default | Description |
| ------------- | ----------- | -------- | ------- | ----------- |
| `placeholder` | `ReactNode` |          | -       | -           |
| `asChild`     | `boolean`   |          | -       | -           |

### Usage[​](#usage-9 "Direct link to Usage")

```tsx
import { SelectValue } from '@databricks/appkit-ui';

<SelectValue /* props */ />

```