Select

Notes

A select component that leverages the browser's built in select, layering on a styled label and presentation for the currently selected option.

Props

childrennode*
option elements associated with the select element.
classNamestring
customFieldStatusbool
A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a FieldStatus component.
displayStatusbool
A flag indicating that the field should display its error message irrespective of the field's error status. If set to true, the error message will display no matter what. If set to false, it will never display.
errorbool
A flag indicating that the field is in an error state.
errorMessagenode
A message to display when the field is in an error state. Wrapped in a FieldStatus component by default.
floatLabelAriaHiddenbool
Set to true to hide float label text from screen readers
idstring
useInactiveStylebool
Set to true to display select as greyed out and recessed
labelstring*
modifiedbool
For use cases where a select has a default option pre-selected, use this prop to visually indicate that the user chose something else
namestring
onChangefunc
selectedOptionFormatterfunc
A function allowing the select component's getSelectedOption to pass a custom text for the selected option. Returns custom text.
valuestring

Example: Select

<div>
  <Select
    error={false}
    errorMessage="Please select a day."
    id="day"
    label="Day"
    required
  >
    <option></option>
    <option>Monday</option>
    <option>Tuesday</option>
    <option>Wednesday</option>
    <option>Thursday</option>
    <option>Friday</option>
    <option>Saturday</option>
    <option>Sunday</option>
  </Select>

  <p className="mt3">The examples here aren't hooked to a validator, so selecting a month does not change the error state.</p>

  <Select
    error={true}
    errorMessage="Please select a month"
    id="month"
    label="Month"
    onChange={(ev) => console.log(ev.target.value)}
    required
  >
    <option></option>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
  </Select>
  <Select
    className="mt3"
    error={false}
    errorMessage="Please select a beverage type."
    hintText="This will be your favorite beverage type."
    id="beverage"
    label="Beverage"
  >
    <option></option>
    <option>Hot Coffees</option>
    <option>Hot Teas</option>
    <option>Frappuccino Beverages</option>
    <option>Cold Drinks</option>
    <option>Cold Coffees</option>
    <option>Iced Teas</option>
  </Select>
</div>;

<div>
  <Select
    error={false}
    errorMessage="Please select a day."
    id="day"
    label="Day"
    required
  >
    <option></option>
    <option>Monday</option>
    <option>Tuesday</option>
    <option>Wednesday</option>
    <option>Thursday</option>
    <option>Friday</option>
    <option>Saturday</option>
    <option>Sunday</option>
  </Select>

  <p className="mt3">The examples here aren't hooked to a validator, so selecting a month does not change the error state.</p>

  <Select
    error={true}
    errorMessage="Please select a month"
    id="month"
    label="Month"
    onChange={(ev) => console.log(ev.target.value)}
    required
  >
    <option></option>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
  </Select>
  <Select
    className="mt3"
    error={false}
    errorMessage="Please select a beverage type."
    hintText="This will be your favorite beverage type."
    id="beverage"
    label="Beverage"
  >
    <option></option>
    <option>Hot Coffees</option>
    <option>Hot Teas</option>
    <option>Frappuccino Beverages</option>
    <option>Cold Drinks</option>
    <option>Cold Coffees</option>
    <option>Iced Teas</option>
  </Select>
</div>;

Example: Select that starts out in the inactive state, a state that is similar to disabled, but the Select is still operable. This state can be used to visually convey 'not required'.

const SelectExample = () => {
  const [inactiveStyle,setInactiveStyle] = React.useState(true);
  const onChange = () => setInactiveStyle(false);
  return (
    <Select
      label="Category"
      useInactiveStyle={inactiveStyle}
      onChange={onChange}
    >
      <option>Hot Coffees</option>
      <option>Cold Coffees</option>
      <option>Frappuccinos</option>
      <option>Hot Breakfast</option>
    </Select>
  )
}

render(<SelectExample />);

const SelectExample = () => {
  const [inactiveStyle,setInactiveStyle] = React.useState(true);
  const onChange = () => setInactiveStyle(false);
  return (
    <Select
      label="Category"
      useInactiveStyle={inactiveStyle}
      onChange={onChange}
    >
      <option>Hot Coffees</option>
      <option>Cold Coffees</option>
      <option>Frappuccinos</option>
      <option>Hot Breakfast</option>
    </Select>
  )
}

render(<SelectExample />);