Select

Name

Enter your full name

Usage

import { Select, SelectOption, SelectWrapper } from "#/ui/components/Select"

<SelectWrapper label="Name">
  <Select options={employees.map((employee) => employee.name)} />
</SelectWrapper>

How it works

The Select component provides some base styling to the radix Select element.

The SelectWrapper goes around your Select to provide additional associated elements easily like labels & hints, but it’s totally optional if you want to use a Select separate from your labels and roll-your-own.

Name

Custom Label

Hint

You can pass a hint to the SelectWrapper to provide additional context to the user.

Name

What do you call yourself?

Error

Passing an error to the SelectWrapper and Select will display error styles. If a hint exists, it will be replaced with the error.

Name

Your name is required

Customization

Custom Option Elements

If you need more fine grain control over your option elements and how they look, you can use the SelectOption element and pass it as a child.

The child elements of SelectOption will be displayed however you create them. In order to ensure the Select works properly, you must pass a value string to the SelectOption element.

Name