Functions

The select component can exhibit different state based on the context and user input. Since it is usually used within a form component, these states can act in response to the user input for other components in the form.

Disabled

If the component is disabled, the dropdown menu won't display when user clicks on the selection area. This behavior is useful when the user is not allowed to select any option.

Error

This behavior is used to indicate that the user has made an error or the selection is not compatible with other form components.

Required

If specified, the select component will be required to have an input from the user. An asterisk will be displayed next to the label to let the user know that the input is required.

Customization

Additional props can be added to the select component to customize its label and dropdown menu to provide use with more context of their selection.

Label and helper text

The label is optional. If provided, helper text is displayed below the component to give the user more context about the component.

With label + Helper text

Without label

Placeholder

A placeholder is a short hint or description that is displayed inside an input field or select component before the user enters a value. It provides a clue to the user about what kind of information is expected in the field. The placeholder text disappears when the user starts typing or selects an option.

Grouping

If the selection options are organized into groups, their groups can be displayed within the dropdown menu to assist users in making their selection.

Multiple select

The multiple select component allows users to select more than one option from the dropdown list. This is useful in scenarios where multiple selections are required, such as selecting multiple tags, categories, or items.