Select

Import#

import { Select } from '@volue/wave-react';

Examples#

Basic#

Controlled#

Select is a controlled component​, meaning that React state drives its value. You need to provide value and onChange properties to "make it work".

With Form Field#

Select should be clearly labeled so it's obvious to users what are they choosing. Optionally, you may want to connect helper text and/or validation feedback message to the select. Thus it is recommended to wrap select inputs with Form Field to create a consistent set of form fields that are accessible to screen reader users.

Placeholder#

You must provide placeholder text when the input does not have an initial value.

Disabled input#

Pass isDisabled prop to the accompanying FormField and it will cascade down to the select input.

You can also pass isDisabled prop directly to Select.

The component can show an option as disabled, by setting the disabled property on the option.

Sizes#

Wave provides two Select sizes ‐ medium and small, with the medium size used by default. All sizes are aligned with sizes of other related components like Button or Text Input.

Size inheritance#

Select automatically inherits size, when placed inside a FormField component.

Responsive#

Select supports responsive syntax for its size property, which means you can change its size based on the viewport.

Multi-sizing#

Wave provides applySizes utility, which lets you specify size "scopes" within your app. All selects within a scope will share the same size unless overwritten on a per-control basis.

Groups#

Group related options together, uses the optgroup​ element internally.

API Reference#