@availity/select NPM

@availity/select

Wrapper for react-select-async-paginate to work with formik

Installation

npm install @availity/select @availity/api-axios @availity/api-core @availity/form formik react reactstrap --save

Validation

See yup and @availity/yup

Select (Default Export)

Select dropdown without a Label or Feedback

Select Usage

import React from 'react';
import { Form } from '@availity/form';
import Select from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';

// ...
const schema = yup.object().shape({
  justTheInput: yup.string().required('This field is required.'),
});

const options = [
  {label: "Option 1", value: 1},
  {label: "Option 2", value: 2},
  {label: "Option 3", value: 3},
];

return (
  <Form
    initialValues={{
      justTheInput: undefined,
    }}
    onSubmit={values => apiResource.submit(values)}
    validationSchema={schema}
  >
    <Select
      id="justTheInput"
      name="justTheInput"
      isMulti={false}
      options={options}
    />

    <Button color="primary" type="submit">
      Submit
    </Button>
  </Form>
);

Select Props

See react-select-async-paginate for additional props

name: String. Required. The name of the field. Will be the key of the selected option(s) that come through in the values of the onSubmit callback.
raw: Boolean. Optional. Default: false. If true, the entire object of the selected value will be returned as the value instead of the value for the valueKey within the object.
valueKey: String. Optional. The key of the value you want returned when selected. Default: value
labelKey: String. Optional. The key for the label you want to appear in the dropdown for the user to see. Default label
maxLength: Number. Optional. The maximum number of options that can be selected (when isMulti is true)
selectRef: Function or Node. Optional. Ref passed to react-select-async-paginate component
className: Additional styles to be added to the <Select />

SelectField

The same as Select but with a Label that appears above the input and a Feedback that appears below the input.

SelectField Usage

import React from 'react';
import { Form } from '@availity/form';
import { SelectField } from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';

// ...
const schema = yup.object().shape({
  justTheInput: yup
    .array()
    .of(yup.string())
    .min(min, 'Must select at least 2 options')
    .max(max, 'Cannot select more than 4 options')
    .required('This field is required.'),
});

const options = [
  {label: "Option 1", value: 1},
  {label: "Option 2", value: 2},
  {label: "Option 3", value: 3},
];

return (
  <Form
    initialValues={{
      selectWithLabel: undefined,
    }}
    onSubmit={values => apiResource.submit(values)}
    validationSchema={schema}
  >
    <SelectField
      label="Select a value"
      id="selectWithLabel"
      name="selectWithLabel"
      isMulti
      options={options}
    />

    <Button color="primary" type="submit">
      Submit
    </Button>
  </Form>
);

SelectField Props

Same as Select, with the following additional props:

label: Node. Optional. The label to render above the Select input
labelHidden: Boolean. Optional. Whether the label should be hidden
labelClass: String. Optional. classNames to pass to the Label
feedbackClass: String. Optional. classNames to pass to the Feedback
groupClass: String. Optional. classNames to pass to the FormGroup

ResourceSelect

A select list which automatically loads and pages through a resource when the user scrolls down.

ResourceSelect Usage

import React from 'react';
import { Form } from '@availity/form';
import { ResourceSelect } from '@availity/select';
import * as yup from 'yup';
import '@availity/yup';

// ...
const schema = yup.object().shape({
  resourceSelect: yup.string().required('This field is required.'),
});

const avCustomResource = new AvApi({ name: 'my-custom-resource' });

return (
  <Form
    initialValues={{
      resourceSelect: '',
    }}
    onSubmit={values => apiResource.submit(values)}
    validationSchema={schema}
  >
    <ResourceSelect
      id="resourceSelect"
      name="resourceSelect"
      resource={avCustomResource}
      isMulti={false}
    />

    <Button color="primary" type="submit">
      Submit
    </Button>
  </Form>
);

ResourceSelect Props