AI Assistant

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.

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

$labelstring

Label text displayed above the select.

$size"default" | "big"

Size of the select.

$errorboolean

Shows error state styling.

$successboolean

Shows success state styling.

$fullWidthboolean

Makes the select span the full width of its container.

themeTheme

Cherry theme object.

Textarea PreviousRangeNext
GitHubDiscord