# Select

> Cherry Select component - dropdown menus with validation states.

Source: https://cherry.al/code/select

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Select

<iframe className="light-only" src="https://demo.cherry.al/preview/select?theme=light" title="Select" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />
<iframe className="dark-only" src="https://demo.cherry.al/preview/select?theme=dark" title="Select" loading="lazy" style={{ width: "100%", height: "320px", border: "1px solid var(--color-grayLight)", borderRadius: "12px" }} />

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](/inputs) design page.

```jsx
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:

```html
<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:

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

## Properties

<Field value="$label" type="string">
  Label text displayed above the select.
</Field>

<Field value="$size" type='"default" | "big" | "small"'>
  Size of the select.
</Field>

<Field value="$error" type="boolean">
  Shows error state styling.
</Field>

<Field value="$success" type="boolean">
  Shows success state styling.
</Field>

<Field value="$fullWidth" type="boolean">
  Makes the select span the full width of its container.
</Field>

<Field value="$wrapperClassName" type="string">
  Class name applied to the wrapper element around the select, for restyling from the outside.
</Field>

## Building blocks

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

<Button href="https://github.com/cherry-design-system/styled-components/blob/main/src/lib/select.tsx" icon="code" iconPosition="left">
  View Source
</Button>