Select

Select from @volvo-cars/react-forms renders a native <select> dropdown for picking one option from a predefined list of 3 or more items. For fewer options, consider using a RadioGroup instead. Pass <option> elements as children.

ModelSelectEX30EX90XC40XC60XC90

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

export function SelectBasic() {
  return (
    <Select name="model" label="Model" variant="top-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>
  );
}

Props

Prop	Type	Required	Default
variant	"top-label" | "floating-label"	-	top-label
required	boolean	-	-
Makes the select required.
enterKeyHint	"done" | "go" | "next" | "previous" | "search" ...	-	-
Hint the browser about what label to show for the Enter button on mobile keyboards.
name	string	✓	-
The name of the input to use when submitting the form.
label	string	✓	-
A concise label for the input.
autoComplete	"off" | "on" | "organization-title" | "organiza...	-	-
What type of information to autocomplete in the select. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
errorMessage	string	-	-
Set the error message of a select and mark it invalid.
aria-invalid	boolean	-	false
Force the input to be invalid.
defaultValue	string | string[]	-	-
Default value of an uncontrolled input.
value	string | string[]	-	-
Value of the input. Makes the input controlled.
onChange	ChangeEventHandler<HTMLSelectElement, Element>	-	-
Fires when the select’s value is changed.
hidden	boolean	-	-
id	string	-	-
title	string	-	-
dir	string	-	-
lang	string	-	-
slot	string	-	-
translate	"yes" | "no"	-	-
className	string	-	-
style	CSSProperties	-	-
tabIndex	number	-	-
onPointerDown	PointerEventHandler<Element>	-	-
onPointerEnter	PointerEventHandler<Element>	-	-
onPointerLeave	PointerEventHandler<Element>	-	-
onPointerMove	PointerEventHandler<Element>	-	-
onPointerUp	PointerEventHandler<Element>	-	-
disabled	boolean	-	false
Disables the input. Use sparingly as it can be non-obvious to users why an input has been disabled. Prefer showing validation messages and hints instead.
autoFocus	boolean	-	false
Gives the input focus on page load. Use sparingly as it can be confusing to screen-reader and mobile users.
readOnly	boolean	-	false
Makes the input read-only. Use sparingly, it's often preferred to present the data as regular text or in a table instead.
form	string	-	-
Id of a form element that this input should be associated with. Defaults to the containing form element.
hint	ReactNode	-	-
Additional hint or description.
aria-describedby	string	-	-
aria-labelledby	string	-	-
onInvalid	FormEventHandler<HTMLSelectElement>	-	-
Fires if the input fails validation on form submit.
onFocus	FocusEventHandler<HTMLSelectElement>	-	-
onBlur	FocusEventHandler<HTMLSelectElement>	-	-
onKeyDown	KeyboardEventHandler<HTMLSelectElement>	-	-
onKeyUp	KeyboardEventHandler<HTMLSelectElement>	-	-