Select

Edit on GitHub

Select lets users choose a single option from a predefined list, presented as a closed field that expands into a menu on interaction.

@volvo-cars/css v3.1.0@volvo-cars/react-forms v3.1.0

Validation error

Car model

Please select a car model

Show codeHide code

import { Select } from '@volvo-cars/react-forms';

export function SelectError() {
  return (
    <Select
      name="model"
      label="Car model"
      errorMessage="Please select a car model"
    >
      <option value="">Select a car model</option>
      <option value="ex30">EX30</option>
      <option value="ex90">EX90</option>
      <option value="xc40">XC40</option>
      <option value="xc60">XC60</option>
      <option value="xc90">XC90</option>
    </Select>
  );
}

Custom styled

Model

Show codeHide code

import { Select } from '@volvo-cars/react-forms';

export function SelectCustomStyled() {
  return (
    <Select name="model" label="Model" className="custom-select">
      <option value="ex30">EX30</option>
      <option value="ex90">EX90</option>
      <option value="xc40">XC40</option>
      <option value="xc60">XC60</option>
      <option value="xc90">XC90</option>
    </Select>
  );
}