Select

The select component allows users to choose a value from a list.

Code

Installation

yarn add @twilio-labs/match formik

Usage

import { Formik } from "formik";
import { Select, Option } from "@twilio-labs/match/components";
const selectOptions: Option[] = [
{ value: "yes", label: "Yes" },
{ value: "ofCourse", label: "Of course!" },
];
const Component = () => (
<Formik initialValues={{ yesNo: "" }} onSubmit={() => {}}>
<Form>
<Select name="yesNo" label="Is Match Awesome?" options={selectOptions} />
</Form>
</Formik>
);

Props

PropTypeDefaultDescription
namestringnull
labelstringnull
size?SelectSize'normal''normal', 'small'
required?booleannullSets the select as required.
disabled?booleannullDisables the select.
hideLabel?booleannullVisually hides the label.
placeholder?stringnullSets the select's placeholder default option.
additional?stringnullSupporting validation instructions.
validate?(value: string) => stringnullOverrides built in validation.
noValidate?booleannullDisables built in validation.

Guidelines

About Selects

Selects are form controls that allow the user to choose from a list of options. Each option can be enabled / disabled, and grouped.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users.

  • Always include a descriptive label for each Select.
  • Do not use placeholder text as a replacement for labels.
  • Use additional to provide information on how to pass the Select's validation.
  • Use error messages to provide information on how to correct invalid data.

Composition

All Selects must include a label. A label may be visually hidden only if the purpose of the Select is abundantly apparent. The hideLabel prop will remove the label entirely and apply an aria-label to the select element for screen readers.

Labels should be short and descriptive with any instructional text belonging in additional. Keep supplemental additional text concise and relevant to the select's validation requirements.

When a Select is required and a value is not selected, provide an error message with instructional cues on how to make the correction. Any additional text provided with the Select will be replaced by the error. Be sure to repeat any relevant information that would have been lost.

Do
  • Use help text to provide additional information to the user that could help prevent errors.
  • Use disabled to show a user that a select can not be interacted with yet.
Don't
  • Don't use placeholder text for every field.
  • Don't use placeholder text to provide error preventing information.
  • Don't use disabled to show information in an select that can not be edited.

Examples

Select with Help Text

Labels and help text are controlled via the Select component props in order to ensure consistency and accessibility best practices.

Select with Error

Selects come with basic constraint validation enabled by default. You may override the built in validation with the validate prop, or completely disable with noValidate. For more advanced validation please read the Formik documentation. Note that additional text is replaced by the validation error.

Disabled Select

Disabled selects cannot be interacted with. Use a read-only select for showing static information which cannot be edited.