---
name: Select
menu: Form
route: components/select
---

import { Playground, Props } from 'docz';
import { Select } from '@ohif/ui';

# Select

## Import

```javascript
import { Select } from '@ohif/ui';
```

## Basic usage

<Playground>
  <div className="flex flex-col flex-1 p-4 items-center">
    <div className="w-56">
      <Select
        options={[
          { value: 'ONE', label: 'ONE' },
          { value: 'TWO', label: 'TWO' },
          { value: 'THREE', label: 'THREE' },
          { value: 'FOUR', label: 'FOUR' },
        ]}
      />
    </div>
  </div>
</Playground>

## Disabled

<Playground>
  <div className="flex flex-col flex-1 p-4 items-center">
    <div className="w-56">
      <Select
        isDisabled
        options={[
          { value: 'ONE', label: 'ONE' },
          { value: 'TWO', label: 'TWO' },
          { value: 'THREE', label: 'THREE' },
          { value: 'FOUR', label: 'FOUR' },
        ]}
      />
    </div>
  </div>
</Playground>

## No Options

<Playground>
  <div className="flex flex-col flex-1 p-4 items-center">
    <div className="w-56">
      <Select
        noOptionsMessage={() => {
          'No Options';
        }}
        options={[]}
      />
    </div>
  </div>
</Playground>

## Properties

<Props of={Select} />
