---
title: "Pick list"
description: "Choose many from a long list: an accent-insensitive search narrows it, \"Select the matches\" takes every match at once, and only the rows in view are rendered. Arrows, Home, End, Space and Ctrl+A work as in any list box."
---

> 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.

# Pick list

## Professionals by specialty

400 professionals in groups. Search "pediatria", then select the matches.

```tsx
import { useState } from 'react';
import { PickList } from '@arbol-ai/ui';
import type { PickListItem } from '@arbol-ai/ui';

const SPECIALTIES = ['General medicine', 'Pediatrics', 'Dermatology', 'Cardiology'];

const SITES = ['North clinic', 'South clinic', 'Downtown'];

const PROFESSIONALS: PickListItem[] = Array.from({ length: 400 }, (_, index) => ({
  id: `pro_${index}`,
  label: `Dr. ${['Ana', 'Luis', 'Marta', 'Jorge', 'Sofía'][index % 5]} ${['Ruiz', 'Torres', 'Gómez', 'Díaz'][index % 4]} ${index + 1}`,
  meta: SITES[index % SITES.length],
  group: SPECIALTIES[index % SPECIALTIES.length],
}));

const ProfessionalsExample = () => {
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set(['pro_0']));
  return (
    <PickList
      className="max-w-md"
      items={PROFESSIONALS}
      label="Professionals"
      onChange={setSelected}
      placeholder="Search professionals"
      selected={selected}
    />
  );
};

<ProfessionalsExample />
```

## Permissions

Identifiers in monospace; a disabled item stays visible and says why.

```tsx
import { useState } from 'react';
import { PickList } from '@arbol-ai/ui';

const PermissionsExample = () => {
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
  return (
    <PickList
      className="max-w-md"
      items={[
        { id: 'contacts:read', label: 'contacts:read', code: true, meta: 'See contacts and their history' },
        { id: 'contacts:write', label: 'contacts:write', code: true, meta: 'Create and edit contacts' },
        { id: 'campaigns:write', label: 'campaigns:write', code: true, meta: 'Start and pause campaigns' },
        {
          id: 'billing:manage',
          label: 'billing:manage',
          code: true,
          disabled: true,
          meta: 'Only organization owners can grant it',
        },
      ]}
      label="Permissions"
      onChange={setSelected}
      placeholder="Search permissions"
      selected={selected}
    />
  );
};

<PermissionsExample />
```

## Source

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

Source: https://epidermis.getarbol.com/components/collections/pick-list/index.mdx