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 v2.5.1@volvo-cars/react-forms v2.0.1

Select Floating Label

Car model

Show codeHide code

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

export function SelectFloatingLabel() {
  return (
    <Select name="model" label="Car model" variant="floating-label">
      <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>
  );
}

Select 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>
  );
}

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>
  );
}