Select

This component has to be a child within the <Form /> component. This component must have <option /> components with an value prop as children.

Basic Usage

import {
  Form,
  Select,
} from 'react-form-package';

Render a <Form /> with a <Select /> and a <Button /> component.

<Form>
  <div>
    <div>Select an option</div>
    <Select id="select" type="select">
      <option disabled value="">
        --- Select an option ---
      </option>
      <option value="option1">option 1</option>
      <option value="option2">option 2</option>
      <option value="option3">option 3</option>
    </Select>
    <div>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
      >
        Submit
      </Button>
    </div>
  </div>
</Form><Form>
  <div>
    <div>Select an option</div>
    <Select id="select" type="select">
      <option disabled value="">
        --- Select an option ---
      </option>
      <option value="option1">option 1</option>
      <option value="option2">option 2</option>
      <option value="option3">option 3</option>
    </Select>
    <div>
      <Button
        id="submit"
        type="submit"
        onClick={state => {
          alert(JSON.stringify(state, null, 2))
          alert('open the console to see the whole state...')
          console.log(state)
        }}
      >
        Submit
      </Button>
    </div>
  </div>
</Form>

Props

Property	Type	Required	Default	Description
id	String	true
type	String	true		`select`
required	Bool	false	false
preOnChange	Func	false		manipulate the state before its validated (see State Manipulation)
errorMessage	String	false		define your own custom error message for the input
onFocus	Func	false		get access to the state of the form when the user focus on the input
onChange	Func	false		get access to the state of the form when the user changes the input
onBlur	Func	false		get access to the state of the form when the user blurs the input
bintTo	String, Array	false		only needed for binding input fields. The id/ids of the input/inputs you want to manipulate
bintToAllways	Bool	false		only needed for binding input fields. Only needed if you want that the bindToCallback is triggered even the bound input field was already touched (blurred)
bindToCallback	Func	false		only needed for binding input fields. The callback to set the target's (`bindTo`) input value, which gets called `onChange` (return a single value or an array of values)

Select

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Props

Basic Usage