---
title: "Select"
description: "A choice from a list that opens from a trigger. The value is the chosen option id; selectionMode=\"multiple\" takes several. Use ComboBox when the list is long enough to search."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Select

## Labelled, with icons

```tsx
import { ChatCircleIcon, PhoneIcon, WhatsappLogoIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import type { Key } from 'react-aria-components';
import { Select, SelectItem } from '@arbol-ai/ui';

const ChannelExample = () => {
  const [channel, setChannel] = useState<Key | null>('whatsapp');
  return (
    <Select
      className="max-w-xs"
      description="Where the reminder is sent."
      label="Channel"
      onChange={setChannel}
      value={channel}
    >
      <SelectItem id="whatsapp" textValue="WhatsApp">
        <WhatsappLogoIcon aria-hidden /> WhatsApp
      </SelectItem>
      <SelectItem id="web" textValue="Web chat">
        <ChatCircleIcon aria-hidden /> Web chat
      </SelectItem>
      <SelectItem id="voice" textValue="Phone call">
        <PhoneIcon aria-hidden /> Phone call
      </SelectItem>
    </Select>
  );
};

<ChannelExample />
```

## Sections

```tsx
import { Select, SelectItem, SelectSection } from '@arbol-ai/ui';

<Select className="max-w-xs" defaultValue="confirmed" label="Appointment status">
  <SelectSection title="Upcoming">
    <SelectItem id="booked">Booked</SelectItem>
    <SelectItem id="confirmed">Confirmed</SelectItem>
  </SelectSection>
  <SelectSection title="Closed">
    <SelectItem id="attended">Attended</SelectItem>
    <SelectItem id="no-show">No-show</SelectItem>
    <SelectItem id="cancelled">Cancelled</SelectItem>
  </SelectSection>
</Select>
```

## Several options

```tsx
import { Select, SelectItem } from '@arbol-ai/ui';

<Select
  className="max-w-xs"
  defaultValue={['mon', 'wed']}
  label="Calling days"
  selectionMode="multiple"
>
  <SelectItem id="mon">Monday</SelectItem>
  <SelectItem id="tue">Tuesday</SelectItem>
  <SelectItem id="wed">Wednesday</SelectItem>
  <SelectItem id="thu">Thursday</SelectItem>
  <SelectItem id="fri">Friday</SelectItem>
</Select>
```

## Compact, in a toolbar

```tsx
import { Select, SelectItem } from '@arbol-ai/ui';

<Select aria-label="Agent" className="w-44" defaultValue="all" size="sm">
  <SelectItem id="all">All agents</SelectItem>
  <SelectItem id="front-desk">Front desk</SelectItem>
  <SelectItem id="collections">Collections</SelectItem>
</Select>
```

## Source

The examples above are [`src/components/select/select.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/select/select.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/forms/select/index.mdx