Select - Develop

Select shares the same properties as Input component of type text, it just allows for selecting from a list instead of typing. And you can pass children to it. Select can have an error or success state to provide feedback to the user.

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

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

You can add a label by adding a $label prop.

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

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

Here is an example of a Select with success and error state.

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

export default function Page() {
  return (
    <>
      <Select $success>
        <option value="1">Yay</option>
      </Select>
      <Select $error>
        <option value="1">Ops</option>
      </Select>
    </>
  )
}

Properties

Explore the source code on GitHub: