Select

The select element is used to create a drop-down list.
It accepts, as props, any html attribute listed at: Html Select Attributes.

Props

name: string

A field's name in Usetheform state.
If your Select is rendered within a <Collection array />, name is not allowed as a prop.

index: string

A field's index in an array Collection.
index is only allowed if your Select is rendered within a <Collection array /> .

value: string

Specifies the initial value of a select element.

touched: boolean

A field that has been touched/visited. Default value of false.
If true, validation messages (sync and async) will be shown but only when the event onBlur of the field is triggered by a user action.

multiple: boolean

When present, it specifies that multiple options can be selected at once. Default value of false.

reducers: array | function

(nextValue, prevValue, formState) => nextValue

An array whose values correspond to different reducing functions.
Reducer functions specify how the Select's value changes.

innerRef: object (a mutable ref object)

When you need to access the underlying DOM node created by Select (e.g. to call focus), you can use a ref to store a reference to the select dom node.

const ref = useRef(null)
<Select innerRef={ref} name="test">...options...</Select>

Basic usage

Single options

import { Form, Select } from 'usetheform'

root:{} 0 keys

<Form>
  <Select name="select">
    <option value="">Select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Select>
</Form>

<Form>
  <Select name="select">
    <option value="">Select an option</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Select>
</Form>

Multiple options

root:{} 0 keys

<Form>
  <Select name="select" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Select>
</Form>

<Form>
  <Select name="select" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </Select>
</Form>

Reducers

import { Form, Select } from 'usetheform'

root:{} 0 keys

() => {
  const tenIfEven = (nextValue, prevValue) =>
    nextValue !== '' && Number(nextValue) % 2 === 0 ? '10' : nextValue
  const elevenIfOdd = (nextValue, prevValue) =>
    nextValue !== '' && Number(nextValue) % 2 !== 0 ? '11' : nextValue
  return (
    <Form>
      <Select name="select" reducers={[tenIfEven, elevenIfOdd]}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="10">10</option>
        <option value="11">11</option>
      </Select>
    </Form>
  )
}

() => {
  const tenIfEven = (nextValue, prevValue) =>
    nextValue !== '' && Number(nextValue) % 2 === 0 ? '10' : nextValue
  const elevenIfOdd = (nextValue, prevValue) =>
    nextValue !== '' && Number(nextValue) % 2 !== 0 ? '11' : nextValue
  return (
    <Form>
      <Select name="select" reducers={[tenIfEven, elevenIfOdd]}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="10">10</option>
        <option value="11">11</option>
      </Select>
    </Form>
  )
}

Validation - Sync

import { useValidation } from 'usetheform'

root:{} 0 keys

() => {
  const required = value =>
    value && value.trim() !== '' ? undefined : 'Required'
  const [status, validation] = useValidation([required])
  return (
    <Form>
      <Select name="selectRequired" touched {...validation}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </Select>
      {status.error && <label>{status.error}</label>}
    </Form>
  )
}

() => {
  const required = value =>
    value && value.trim() !== '' ? undefined : 'Required'
  const [status, validation] = useValidation([required])
  return (
    <Form>
      <Select name="selectRequired" touched {...validation}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </Select>
      {status.error && <label>{status.error}</label>}
    </Form>
  )
}

Validation - Async

import { useAsyncValidation, useForm } from 'usetheform'
const Submit = () => {
  const { isValid } = useForm();
  return (
    <button disabled={!isValid} type="submit">
      Submit
    </button>
  );
};

root:{} 0 keys

() => {
  const asyncTest = value =>
    new Promise((resolve, reject) => {
      // it could be an API call or any async operation
      setTimeout(() => {
        if (value !== '3') {
          reject('Selection not valid')
        } else {
          resolve('Success')
        }
      }, 1000)
    })
  const [asyncStatus, asyncValidation] = useAsyncValidation(asyncTest)
  return (
    <Form>
      <Select name="selectRequired" touched {...asyncValidation}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </Select>
      {asyncStatus.status === undefined && (
        <label>Async Check Not Started Yet</label>
      )}
      {asyncStatus.status === 'asyncStart' && <label>Checking...</label>}
      {asyncStatus.status === 'asyncError' && (
        <label>{asyncStatus.value}</label>
      )}
      {asyncStatus.status === 'asyncSuccess' && (
        <label>{asyncStatus.value}</label>
      )}
      <Submit />
    </Form>
  )
}

() => {
  const asyncTest = value =>
    new Promise((resolve, reject) => {
      // it could be an API call or any async operation
      setTimeout(() => {
        if (value !== '3') {
          reject('Selection not valid')
        } else {
          resolve('Success')
        }
      }, 1000)
    })
  const [asyncStatus, asyncValidation] = useAsyncValidation(asyncTest)
  return (
    <Form>
      <Select name="selectRequired" touched {...asyncValidation}>
        <option value="">Select an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </Select>
      {asyncStatus.status === undefined && (
        <label>Async Check Not Started Yet</label>
      )}
      {asyncStatus.status === 'asyncStart' && <label>Checking...</label>}
      {asyncStatus.status === 'asyncError' && (
        <label>{asyncStatus.value}</label>
      )}
      {asyncStatus.status === 'asyncSuccess' && (
        <label>{asyncStatus.value}</label>
      )}
      <Submit />
    </Form>
  )
}