Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Select

Dropdown control for selecting a value from a list

## Example​

    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​

Dropdown control for selecting a value from a list

Source: `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​

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

    <Select /* props */ />

## SelectContent​

Source: `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​

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

    <SelectContent /* props */ />

## SelectGroup​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectGroup /* props */ />

## SelectItem​

Select item component for individual options in a dropdown.

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectItem /* props */ />

## SelectLabel​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectLabel /* props */ />

## SelectScrollDownButton​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectScrollDownButton /* props */ />

## SelectScrollUpButton​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectScrollUpButton /* props */ />

## SelectSeparator​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectSeparator /* props */ />

## SelectTrigger​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectTrigger /* props */ />

## SelectValue​

Source: `packages/appkit-ui/src/react/ui/select.tsx`

### Props​

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

### Usage​

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

    <SelectValue /* props */ />