Select

Menu menu for choosing single option from a list.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectPopup,
  SelectList,
  SelectItem,
  SelectGroup,
  SelectGroupLabel,
  SelectSeparator
} from "components/selia/select";

Structure

The expected structure and composition of the component.

<Select>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectPopup>
    <SelectList>
      <SelectItem>Item 1</SelectItem>
      <SelectItem>Item 2</SelectItem>
      <SelectItem>Item 3</SelectItem>
    </SelectList>
  </SelectPopup>
</Select>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Multiple

To allow users to select multiple options, pass the multiple prop to the Select component.

Group

To group options, pass the group prop to the Select component.

Icon

To add an icon to an option, you can place the icon inside the SelectItem component.

Disable Option

To disable an option, pass the disabled prop to the SelectItem component.