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

import { Playground, PropsTable } from 'docz';
import Select from './Select';

# Select

**The `Select` component does not directly map to a native `<select />` element.** It returns a wrapper around the native HTML `<select />`:

```javascript
<label>
  <select>
    <option value="1">First</option>
    <option value="2">Second</option>
  </select>

  <svg /> <-- This is the custom arrow
</label>
```

Use the prop `selectProps` to pass down properties to the native `<select />`.

## Usage

```javascript
import { Select } from '@snowpak/powpow';

export default () => (
  <Select selectProps={{ onChange: e => alert(event.target.value)}}>
    <option>Option 1</option>
    <option>Option 2</option>
  </Select>;
);
```

## Props

<PropsTable of={Select} />

## Examples

<Playground>
  <Select data-cy="sp-select">
    <option>Option 1</option>
    <option>Option 2</option>
  </Select>
</Playground>

### With label

<Playground>
  <Select
    label="Select an option"
    selectProps={{ onChange: e => alert(event.target.value) }}
    data-cy="sp-select--withLabel"
  >
    <option>Option 1</option>
    <option>Option 2</option>
  </Select>
</Playground>

### With custom height and font size

<Playground>
  <Select
    __height="64px"
    __fontSize="24px"
    selectProps={{ onChange: e => alert(event.target.value) }}
    data-cy="sp-select--customHeight"
  >
    <option>Option 1</option>
    <option>Option 2</option>
  </Select>
</Playground>

### Invalid

<Playground>
  <Select isInvalid={true} data-cy="sp-select--isInvalid">
    <option>Option 1</option>
    <option>Option 2</option>
  </Select>
</Playground>