Components > Select

Select

A dropdown of options that the user can choose from.

MDN select, UI Playbook, Radix UI Select

trigger slot

inline-flex justify-between items-center gap-2 text-secondary-900 whitespace-nowrap border border-secondary-200 data-[placeholder]:text-secondary-400 rounded transition-all focus:outline-none ring-offset-2 ring-primary-700 focus:ring-2 dark:text-secondary-100 dark:border-secondary-700 dark:ring-secondary-800 dark:data-[placeholder]:text-secondary-600 text-base px-4 pt-1.5 pb-2 bg-secondary-100 dark:bg-secondary-800

icon slot

mt-1 w-5 h-5

content slot

mt-2 p-2 flex flex-col gap-2 bg-secondary-100 dark:bg-secondary-800 border border-secondary-200 rounded transition-all focus:outline-none dark:border-secondary-700

separator slot

my-2 border-b border-secondary-200 dark:border-secondary-700

label slot

pl-8 pr-16 py-1 text-secondary-600 dark:text-secondary-400 text-sm

item slot

pl-8 pr-16 py-1 relative flex items-center justify-start cursor-pointer select-none text-secondary-700 whitespace-nowrap rounded focus:outline-none focus:bg-secondary-200 dark:text-secondary-100 dark:focus:bg-secondary-700 text-base

itemIcon slot

h-4 w-4

itemIconIndicator slot

absolute top-1/2 left-2 -translate-y-1/2

import React from 'react'
import { Select } from '@components/ui/Select';

() => {
  return (
    <Select.Root>
      <Select.Trigger placeholder="Select an option" className="w-56" />

        <Select.Content>
          <Select.Item value="option 1">
            Option 1
          </Select.Item>

          <Select.Separator />

          <Select.Group>
            <Select.Label>
              Meat
            </Select.Label>
            <Select.Item value="beef">
              Beef
            </Select.Item>
            <Select.Item value="chicken">Chicken</Select.Item>
            <Select.Item value="lamb">Lamb</Select.Item>
            <Select.Item value="pork">Pork</Select.Item>
          </Select.Group>

          <Select.Separator />

          <Select.Group>
            <Select.Label>
              Meat
            </Select.Label>
            <Select.Item value="beef 1">Beef</Select.Item>
            <Select.Item value="chicken 1">Chicken</Select.Item>
            <Select.Item value="lamb 1">Lamb</Select.Item>
            <Select.Item value="pork 1">Pork</Select.Item>
          </Select.Group>
        </Select.Content>
    </Select.Root>
  );
};

Installation

Install Radix UI's Select:

yarn add @radix-ui/react-select

# or
npm install @radix-ui/react-select

Copy and paste this Select primitive at components/ui/Select.tsx.

Anatomy

How to use all the parts together:

import { Select } from '@components/ui/Select';

export default () => (
  <Select.Root>
    <Select.Trigger />

    <Select.Content>
      <Select.Item />

      <Select.Separator />

      <Select.Group>
        <Select.Label />
        <Select.Item />
        
        <Select.Item />
        <Select.Item />
      </Select.Group>
    </Select.Content>
  </Select.Root>
);

Usage

Basic Usage of Select:

import { Select } from '@components/ui/Select';

<Select.Root>
  <Select.Trigger placeholder="Select a flavor" />

  <Select.Content>
    <Select.Item value="Chocolate">
       Chocolate
    </Select.Item>
    <Select.Item value="Vanilla">
       Vanilla
    </Select.Item>
    <Select.Item value="Suprise Me">
       Suprise Me
    </Select.Item>
  </Select.Content>
</Select.Root>

Examples

Basic Select

Select with Groups

Sizes

Outlined

You can use the outlined prop to make the select outlined.

You can toggle the outline version of a select by <Select outlined />. It is false by default.

Input Validation

Before and/or after the user submits their input, we validate what they've entered. We can use the success, warn, and error props to notify the users of the validation result.

Success

You can use the success prop to notify the users of a successful validation result.

Warning

You can use the warn prop to notify the users of a warning. It is recommended to avoid relying solely on color by adding an icon or a text to explain the warning.

Please select a flavor.

Error

You can use the error prop to notify the users of that the validation failed. It is recommended to avoid relying solely on color by adding an icon or a text to explain the error.