npm package: @placardi/select
Description: Placardi UI select component
Author: Alexander Zakharov
Latest version: 0.3.3

# @placardi/select

Select component is used for collecting user provided information from a list of options.

## Installation

```bash
npm i @placardi/select
```

## Dependencies

- react
- styled-components
- @placardi/theme
- @placardi/button

## Usage

### Basic usage

In order to use the select component, wrap the application in global theme provider from `@placardi/theme`. Then, use the select as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option'>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;
```

### Clearable select

Select can be made clearable so that users can clear selected option. Pass a `clearable` prop to the select in order to make it clearable. The default is set to `false`.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' clearable>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;
```

### Fluid select

Select component can be made fluid so that it occupies maximum width of its parent container. Pass a `fluid` prop to the select in order to make it fluid. The default is set to `false`.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' fluid>
      <Option value='option-1'>Option 1</Option>
      <Option value='option-2'>Option 2</Option>
      <Option value='option-3'>Option 3</Option>
    </Select>
  </ThemeProvider>
)

export default App;
```

### Customisable select options

Select options can either be text nodes or arbitrary elements.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select placeholder='Select option' clearable>
      <Option value='option-1'>
        <span>Option 1</span>
      </Option>
      <Option value='option-2'>
        <span>Option 2</span>
      </Option>
      <Option value='option-3'>
        <span>Option 3</span>
      </Option>
    </Select>
  </ThemeProvider>
)

export default App;
```

### Select with initial value

Select component can be initialised with one of the values already selected by using `defaultValue` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Select, { Option } from '@placardi/select';

const App: FC = () => (
  <ThemeProvider>
    <Select defaultValue='option-1'>
      <Option value='option-1'>
        <span>Option 1</span>
      </Option>
      <Option value='option-2'>
        <span>Option 2</span>
      </Option>
      <Option value='option-3'>
        <span>Option 3</span>
      </Option>
    </Select>
  </ThemeProvider>
)

export default App;
```