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'

Preview

Live Editor

<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

Preview

Live Editor

<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'

Preview

Live Editor

function SelectWithReducers() {
  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 { Form, Select, useValidation } from 'usetheform'

Preview

Live Editor

function SelectWithSyncValidation() {
  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 className="vl">{status.error}</label>}
    </Form>
  )
}

Validation - Async

import { Form, Select, useAsyncValidation } from 'usetheform'
import { Submit } from './Submit.ts'

Preview

Live Editor

function SelectAsyncValidation() {
  const asyncValidIfThree = 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(asyncValidIfThree);
  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 className="vl">Async Check Not Started Yet</label>}
      {asyncStatus.status === "asyncStart" && <label className="vl">Checking...</label>}
      {asyncStatus.status === "asyncError" && <label className="vl">{asyncStatus.value}</label>}
      {asyncStatus.status === "asyncSuccess" && <label className="vl">{asyncStatus.value}</label>}
      <Submit />
    </Form>
  )
}

Submit.ts

import { useAsyncValidation, useForm } from 'usetheform'

const Submit = () => {
  const { isValid } = useForm();
  return (
    <button disabled={!isValid} type="submit">
      Submit
    </button>
  );
};