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

# Select (список)

Наследует [TextInput props](/docs/forms/TextInput).

Список позволяет пользователю выбрать один из нескольких вариантов. Работает аналогично тегу HTML `<select>`.

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

## Простой пример

```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',
    ]}
  />
)
```

## Отображение пустого значения

Пустое значение по умолчанию показывается. Если вы хотите, чтобы у пользователей не было возможности удалить значение, передайте `showEmptyValue={false}`.

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

## Изменить метку пустого значения

Вы можете изменить метку пустого значения, используя свойство `emptyValueLabel`.

```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
/>