---
name: SelectField
menu: UI Kit
---

import { Playground, PropsTable } from 'docz'
import SelectField from './SelectField.tsx'
import Option from './Option.tsx'
import OptGroup from './OptGroup.tsx'
import HorizontalGutter from '../HorizontalGutter'
import Container from "react-with-state-props"

# SelectField

## Basic Use
<Playground>
  <Container
  state={{ value: "blue" }}
  render={props => (
    <SelectField value={props.value} onChange={e => props.setValue(e.target.value)}>
      <Option value="red">Red Pill</Option>
      <Option value="blue">Blue Pill</Option>
    </SelectField>
  )}/>
</Playground>

## Groups
<Playground>
  <Container
  state={{ value: "dog" }}
  render={props => (
    <SelectField value={props.value} onChange={e => props.setValue(e.target.value)}>
      <OptGroup label="mammals">
        <Option value="dog">Dog</Option>
        <Option value="cat">Cat</Option>
      </OptGroup>
      <OptGroup label="fish">
        <Option value="salmon">Salmon</Option>
        <Option value="tuna">Tuna</Option>
      </OptGroup>
    </SelectField>
  )}/>
</Playground>


## Disabled
<Playground>
  <SelectField disabled>
    <Option value="red">Red Pill</Option>
    <Option value="blue">Blue Pill</Option>
  </SelectField>
</Playground>
