Select

Select is used as a traditional dropdown input

Examples

Select Input

<Formik initialValues={{[defaultName]: "chocolate"}}  onSubmit={()=>{}}>
      <Select name={defaultName} label={defaultLabel} options={defaultOptions}/>
    </Formik>

Select with Error state

<Formik initialValues={{[defaultName]: ""}} onSubmit={()=>{}} validationSchema={validationRequired}>
      <Flex flexDirection="column">
        <div>
          Click the select box then click outside without making a selection to trigger an error state.
        </div>  
        <Select name={defaultName} label={defaultLabel}  options={defaultOptions} />
      </Flex>  
    </Formik>

Select with default value

<Formik initialValues={{[defaultName]: "chocolate"}}  onSubmit={()=>{}}>
      <Select name={defaultName} label={defaultLabel} options={defaultOptions}/>
    </Formik>

Select with custom option

<Formik initialValues={{textInputDefault: ""}} onSubmit={()=>{}}>
      <Select name={defaultName} label={defaultLabel} options={defaultOptionsForName} components={{Option}} />
    </Formik>

Async Select

<Formik initialValues={{textInputDefault: ""}} onSubmit={()=>{}}>
      <Select name={defaultName} label={defaultLabel} loadOptions={promiseOptions} options={defaultOptionsForName} />
    </Formik>

Creatable Select

<Formik initialValues={{textInputDefault: ""}} onSubmit={()=>{}}>
      <Select name={defaultName} isCreatable={true} label={defaultLabel} options={defaultOptionsForName} />
    </Formik>

Creatable async Select

<Formik initialValues={{textInputDefault: ""}} onSubmit={()=>{}}>
      <Select name={defaultName} label={defaultLabel} isCreatable={true} loadOptions={promiseOptions} options={defaultOptionsForName} />
    </Formik>