# Select

Dropdown control for selecting a value from a list

## Example

## 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

| 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

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

```

## 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

| 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

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```

## 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

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

### Usage

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

```