Select

Select shares the same properties as the Input component of type text, but allows for selecting from a list instead of typing. Select can have error or success states to provide feedback to the user.

Keep in mind that the <select> element inherently includes native browser properties like onChange. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props.

For design guidelines and all interactive states, see the Inputs design page.

import React from "react";
import { Select } from "cherry-styled-components";

export default function Page() {
  return (
    <Select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </Select>
  );
}

With a label:

<Select $label="Label" $fullWidth>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</Select>

With success and error states:

<Select $success>
  <option value="1">Yay</option>
</Select>
<Select $error>
  <option value="1">Ops</option>
</Select>

Properties

Building blocks

The StyledIconWrapper styled component that positions the dropdown arrow is also exported, so you can reuse it when building custom selects.