---
name: SelectField
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import SelectField from './SelectField'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# SelectField

The `SelectField` is a pre-built Select field control that requires a label and handles accessibility internally.

### Try it out

export const code = `<form>
  <SelectField label="What's that in the sky?" name="ufo" options={['bird', 'plane', 'superman']} />
</form>`

<LiveProvider code={code} scope={{ SelectField }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

The `SelectField` should be used instead of the more rudimentary `Select` where possible to receive the accessibility benefits.

Shorter text is prefered for option labels to keep the output from assistive technologies concise.

## Basic usage

Basically the same as `Select`, just with the addition of some status & field-related props.

```jsx
import React, { useState, useCallback } from 'react'

export default () => {
  const [values, setValues] = useState({ ufo: undefined })
  const handleChange = useCallback(
    ({ target }) => {
      setValues(state => setValues({ ...state, [target.name]: target.value }))
    },
    [setValues]
  )
  const onSubmit = useCallback(
    event => {
      event.preventDefault()
      const data = { ...values }
      // send data to api
    },
    [values]
  )

  return (
    <form onSubmit={onSubmit}>
      <SelectField
        label="What's that in the sky?"
        name="ufo"
        options={['bird', 'plane', 'superman']}
        onChange={handleChange}
        value={values.ufo}
      />
    </form>
  )
}
```

## Properties

<PropsTable of={SelectField} />