Select Component

A versatile Select component for choosing from a list of options.

Fruit

import { Select } from "@locus-ui/components";import styles from "./styles.css";
<Select.Root variant="outlined">  <Select.Label position="top">Fruit</Select.Label>  <Select.Trigger />  <Select.Content>    <Select.Item value="apple">Apple</Select.Item>    <Select.Item value="banana">Banana</Select.Item>    <Select.Item value="mango">Mango</Select.Item>  </Select.Content></Select.Root>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Select } from "@locus-ui/components";
<Select.Root>  <Select.Label />  <Select.Trigger />  <Select.Content>    <Select.Group>      <Select.Item />    </Select.Group>    <Select.Separator />  </Select.Content></Select.Root>

Examples

Label Positions

The label can be positioned with the position prop: top, left, or inside.

Top

Left

Inside

label-positions.tsx

import { Select } from "@locus-ui/components";
const labelPositions = ["top", "left", "inside"];
return labelPositions.map((position) => (  <Select.Root key={position} variant="outlined">    <Select.Label position={position}>      {position.charAt(0).toUpperCase() + position.slice(1)}    </Select.Label>    <Select.Trigger />    <Select.Content>      <Select.Item value="option1">Option 1</Select.Item>

Variants

Select components come with three built in variants, outlined, solid, and clear, each shown across all label positions.

Outlined

Solid

Clear

variants.tsx

import { Select } from "@locus-ui/components";
const variants = ["outlined", "solid", "clear"];
return variants.map((variant) => (  <Select.Root key={variant} variant={variant}>    <Select.Label position="left">      {variant.charAt(0).toUpperCase() + variant.slice(1)}    </Select.Label>    <Select.Trigger />    <Select.Content>      <Select.Item value="option1">Option 1</Select.Item>

Groups

Items can be organized into groups using Select.Group with a title, separated by Select.Separator.

groups.tsx

import { Select } from "@locus-ui/components";
<Select.Root variant="solid">  <Select.Trigger />  <Select.Content>    <Select.Group title="Group 1">      <Select.Item value="option1">Option 1</Select.Item>      <Select.Item value="option2">Option 2</Select.Item>    </Select.Group>    <Select.Separator />