---
title: "Entity Select"
description: "The picker for a server's own members, roles and channels, with chips when more than one may be chosen."
---

The picker for the things a server already knows about: its members, its roles, its channels, or all of them at once. It is a separate control from the [string select](/docs/components/select-menu) rather than a mode of it, because the rows are not strings — a member arrives with a face, a role with a colour and a headcount, a channel with the glyph that says what kind of channel it is.

_Live example of Entity Select — see the page for the rendered demo._

## More than one [#multiple]

`max` above one turns the control into chips: the choices leave the list and sit in the trigger, each with a cross, and every row grows a box instead of a tick — the shape is what says whether picking this one un-picks the last. Backspace removes the chip nearest the caret.

At the limit the list stays open and stops taking more, rather than silently dropping the oldest choice: somebody picked those, and a control that quietly un-picks one is a control that lies.

_Live example of Entity Select — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add entity-select
```

Files written — React: components/ui/entity-select.tsx. Vue: components/ui/entity-select/EntitySelect.vue, components/ui/entity-select/index.ts.

## Usage

React:

```tsx
import { EntitySelect } from "@/components/ui/entity-select"
```

Vue:

```ts
import { EntitySelect } from "@/components/ui/entity-select"
```

## API reference

**`EntitySelect`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Entity Select reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.