---
name: 'Field: Select'
route: /components/common/forms/form-field-select
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldSelect from './form-field-select'

# FormFieldSelect
**SUBCATEGORY:** Forms

<hr />

## Select field
### Description
For providing a menu of options.

**Default**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
  {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
    {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      error="Notice"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
    <State initial={{ value: '2', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
        {({ state, setState }) => (
        <FormFieldSelect
          {...state}
          disabled
          labelText="Label"
          id="123"
          onChange={e => setState({ value: e.target.value })}
       />
      )}
      </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
    {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

**defaultValue**
<Playground>
  <State initial={{ options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
    {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      labelText="Label"
      id="123"
      defaultValue='3'
      onChange={e => setState({ value: e.target.value })}
   />
  )}
  </State>
</Playground>

<hr />

## Select field (adjacent)
### Description
For providing a menu of options.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
  {({ state, setState }) => (
    <FormFieldSelect
      adjacent
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</State>
</Playground>

<hr />

## Select field (slim)
### Description
For providing a menu of options. Use where inputs are nested or constrained by layout.

**Default**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
  {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
    />
  )}
</State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
    {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      error="Notice"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
   />
  )}
  </State>
</Playground>

**Disabled**
<Playground>
    <State initial={{ value: '2', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
        {({ state, setState }) => (
        <FormFieldSelect
          {...state}
          disabled
          labelText="Label"
          id="123"
          onChange={e => setState({ value: e.target.value })}
          slim
       />
      )}
      </State>
</Playground>

**Helper**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
    {({ state, setState }) => (
    <FormFieldSelect
      {...state}
      helperText="Helper text"
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
   />
  )}
  </State>
</Playground>

<hr />

## Select field (slim, adjacent)
### Description
For providing a menu of options. Use where inputs are nested or constrained by layout.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

**Default**
<Playground>
  <State initial={{ value: '', options: [{ label: 'Option 1', value: '1'}, { label: 'Option 2', value: '2'}, { label: 'Option 3', value: '3'}] }}>
  {({ state, setState }) => (
    <FormFieldSelect
      adjacent
      {...state}
      labelText="Label"
      id="123"
      onChange={e => setState({ value: e.target.value })}
      slim
    />
  )}
</State>
</Playground>

<hr />

## Properties
<Props of={FormFieldSelect} />