---
name: SelectField
menu: Components
route: /components/select-field
---

import { SelectField } from './';
import { InputField } from '../InputField';
import { Pane } from '../Pane';
import { Playground } from 'docz';

# SelectField

Select Field...

## Import

```js
import { SelectField } from '@firstclasspostcodes/sw13';
// or
import { SelectField } from '@firstclasspostcodes/sw13/lib/components/SelectField';
```

## Example

<Playground>
  <Pane spacing={{ py: { sm: 4 } }} radius="2" background="gray" hue="0">
    <Pane spacing={{ mx: { sm: 4 } }}>
      <InputField 
        input={(props) => <SelectField {...props} />}
        inputProps={{
          defaultValue: 'banana',
          onChange: (value) => console.log(value),
          options: [
            { value: 'banana', label: 'Banana' },
            { value: 'orange', label: 'Orange' },
            { value: 'blueberry', label: 'Blueberry' },
            { value: 'kiwi', label: 'Kiwi' },
            { value: 'strawberry', label: 'Strawberry' },
            { value: 'raspberry', label: 'Raspberry' },
          ]
        }}
        id="fruit"
        label="Fruit"
        description="Choose the fruit you enjoy the most."
        hint="It is definitely a banana, orange or blueberry."
      />
    </Pane>
  </Pane>
</Playground>

The below playground demonstrates a remote-loading select component:

<Playground>
  <Pane spacing={{ py: { sm: 4 } }} radius="2" background="blue" hue="0">
    <Pane spacing={{ mx: { sm: 4 } }}>
      <InputField 
        input={(props) => <SelectField {...props} />}
        inputProps={{
          async: true,
          onChange: (value) => console.log(value),
          loadOptions: (input) => new Promise((resolve) => {
            const options = [
              { value: 'banana', label: 'Banana' },
              { value: 'orange', label: 'Orange' },
              { value: 'blueberry', label: 'Blueberry' },
              { value: 'kiwi', label: 'Kiwi' },
              { value: 'strawberry', label: 'Strawberry' },
              { value: 'raspberry', label: 'Raspberry' },
            ];
            setTimeout(() => {
              const matches = options.filter(({ label }) => (
                label.toLowerCase().includes(input.toLowerCase())
              ));
              resolve(matches);
            }, 50);
          }),
        }}
        id="fruit"
        label="Fruit"
        description="Choose the fruit you enjoy the most."
        hint="It is definitely a banana, orange or blueberry."
      />
    </Pane>
  </Pane>
</Playground>