import { useState } from 'react'
import Select from '../Select'
import Div from '../../Div'
import Br from '../../Br'
import { Sandbox } from '@startupjs/docs'

# Select

Inherits [TextInput props](/docs/forms/TextInput).

Select lets user pick one of multiple options. Works similar to HTML's `<select>` tag.

```jsx
import { Select } from '@startupjs/ui'
```

## Simple example

```jsx example
const [color, setColor] = useState()
return (
  <Select
    value={color}
    onChange={setColor}
    options={[
      'red',
      'yellow',
    ]}
  />
)
```

## Disabled

```jsx example
return (
  <Select
    disabled
    value='red'
    options={[
      'red',
      'yellow',
    ]}
  />
)
```

## Readonly

```jsx example
return (
  <Select
    readonly
    value='red'
    options={[
      'red',
      'yellow',
    ]}
  />
)
```

## Showing Empty value

By default the empty value is shown. If you want to prevent users from being able to remove the value, pass `showEmptyValue={false}`.

```jsx example
const [color, setColor] = useState('red')
return (
  <Select
    value={color}
    onChange={setColor}
    options={['red', 'yellow', 'blue']}
    showEmptyValue={false}
  />
)
```

## Change empty value label

You can change label of an empty value by using `emptyValueLabel` property.

```jsx example
const [color, setColor] = useState()
return (
  <Select
    value={color}
    onChange={setColor}
    options={['red', 'yellow', 'blue']}
    emptyValueLabel='none'
  />
)
```

## Sandbox

<Sandbox
  Component={Select}
  props={{
    value: 'Los Angeles',
    options: ['New York', 'Los Angeles','Tokyo'],
    onChange: value => alert('Value ' + value + ' is selected')
  }}
  block
/>