> ## Documentation Index
> Fetch the complete documentation index at: https://www.chapterjs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# select()

> Tout ce que déclare un fichier de menu déroulant, les trois façons d’écrire les options, et ce que reçoit la fonction run

`select()` déclare un menu déroulant, depuis n’importe quel fichier de `src/` ; le nom de son export est son identifiant. Elle prend un objet, `SelectConfig`, et type `values` dans `run` d’après lui.

```ts src/components/color.ts theme={"theme":{"light":"github-light","dark":"vesper"}}
import { select } from 'chapterjs';

export default select({
  placeholder: 'Choisissez une couleur',
  options: { Rouge: 'red', Bleu: 'blue' },
  async run({ interaction, value }) {
    await interaction.update({ content: `Vous avez choisi ${value}.`, components: [] });
  },
});
```

> [!NOTE]
>
> Comment écrire un menu et l’afficher est dans le [guide](https://www.chapterjs.org/fr/components/selects.md). Cette page liste ce qui existe. Ce qu’un menu partage avec un bouton (`data`, `where`, `who`, l’endroit) est sur la [page de button()](https://www.chapterjs.org/fr/reference/button.md#partagé-par-les-boutons-et-les-menus-déroulants).

## select()

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
select<Options extends SelectOptions, Data extends DataShape = {}, Where extends ComponentWhere = 'guild'>(config: StringSelectConfig<Options, Data, Where>): SelectDeclaration<Data>
select<Type extends EntitySelectType, Data extends DataShape = {}, Where extends ComponentWhere = 'guild'>(config: EntitySelectConfig<Type, Data, Where>): SelectDeclaration<Data>
```

Déclare un menu déroulant. Exportez le résultat depuis n’importe quel fichier de `src/` : le nom de l’export est ce qui distingue le menu, donc vous n’écrivez jamais d’identifiant.

### SelectDeclaration

Ce que renvoie `select()` : une déclaration que le framework trouve dans les exports d’un fichier. Importez-le là où vous envoyez un message, et appelez-le avec les données qu’il transporte ; un menu sans données s’utilise tel quel, ou s’appelle avec ce qu’il faut afficher.

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type SelectDeclaration<Data extends DataShape = {}> = { readonly config: unknown } &
  ({} extends Data
    ? ((options?: SelectInstanceOptions) => SelectComponent) & SelectComponent
    : {} extends DataInputOf<Data>
      ? ((data?: DataInputOf<Data>, options?: SelectInstanceOptions) => SelectComponent) & SelectComponent
      : (data: DataInputOf<Data>, options?: SelectInstanceOptions) => SelectComponent)
```

**config** `unknown`

Ce que le fichier a donné à `select()`, pas encore vérifié.

## SelectConfig

Ce qu’un fichier de menu donne à `select()` : un menu de textes, ou d’éléments du serveur.

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type SelectConfig = StringSelectConfig | EntitySelectConfig
```

Les deux ont chaque champ d’[InteractiveConfig](https://www.chapterjs.org/fr/reference/button.md#interactiveconfig) et de [SelectLook](#selectlook), plus :

**min** `number`

Combien d’éléments doivent être choisis au moins (0 à 25). 1 par défaut.

**max** `number`

Combien d’éléments peuvent être choisis au plus (1 à 25). 1 par défaut.

**run** `(context: SelectContext\<Picked, Data, Where\>) =\> unknown`

Ce qu’il faut faire quand quelque chose est choisi. Omis pour un menu qui n’est qu’attendu (`message.waitForClick()`).

### StringSelectConfig

Un menu de textes que vous déclarez.

**type** `'string'`

La sorte de menu : des textes que vous déclarez, ce qui est la valeur par défaut.

**options** `SelectOptions` *required*

Les options (25 au plus) : une liste de textes, un objet de ce qui est affiché vers ce que reçoit votre code, ou une liste de `RichOption`.

### EntitySelectConfig

Un menu d’utilisateurs, de rôles, d’utilisateurs et rôles, ou de salons du serveur.

**type** `EntitySelectType` *required*

La sorte de menu : ce que liste Discord.

**channelTypes** `readonly ChannelType[]`

Pour un menu de salons : les sortes de salons listées. Toutes par défaut.

### SelectType, EntitySelectType

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type SelectType = 'string' | 'user' | 'role' | 'mentionable' | 'channel'
type EntitySelectType = 'user' | 'role' | 'mentionable' | 'channel'
```

Les sortes de menus : des textes que vous déclarez, ou des éléments du serveur.

[Documentation de Discord](https://docs.discord.com/developers/components/reference#string-select)

## SelectLook

L’apparence d’un menu déroulant.

**placeholder** `DynamicText\<Data\>`

Le texte affiché quand rien n’est choisi (150 caractères au plus) : écrit tel quel, ou une fonction de `t` et des données, lancée au moment de l’envoi du message. Voir [DynamicText](https://www.chapterjs.org/fr/reference/messages.md#dynamictext).

**disabled** `boolean`

Affiche le menu grisé, impossible à utiliser.

### SelectInstanceOptions

Ce qu’un message peut changer quand il affiche un menu : tout ce qu’a `SelectLook`, plus :

**defaults** `readonly (string | \{ id: Snowflake \})[]`

Ce qui est sélectionné quand le menu apparaît : les valeurs des options pour un menu de textes, les identifiants (ou les éléments eux-mêmes) pour les autres.

## Les options

### SelectOptions

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type SelectOptions = readonly string[] | Readonly<Record<string, string>> | readonly RichOption[]
```

Les options d’un menu : une liste de textes (chacun affiché et reçu tel quel), un objet dont les clés sont ce qui est affiché et les valeurs ce que reçoit votre code, ou une liste de `RichOption` pour des descriptions et des emojis. Le même type sert aux champs `select`, `radio` et `checkboxes` d’un [formulaire](https://www.chapterjs.org/fr/reference/modal.md).

### RichOption

Une option d’un menu, avec tout ce que Discord en affiche.

**label** `DynamicText\<Data\>` *required*

Ce que voit la personne (100 caractères au plus) : un texte, ou une fonction de `t` et des données.

**value** `string` *required*

Ce que reçoit votre code (100 caractères au plus).

**description** `DynamicText\<Data\>`

Une seconde ligne sous l’étiquette (100 caractères au plus) : un texte, ou une fonction de `t` et des données.

**emoji** `EmojiInput`

Un emoji avant l’étiquette.

**default** `boolean`

Affiche l’option comme choisie quand le menu apparaît.

### OptionValue

```ts theme={"theme":{"light":"github-light","dark":"vesper"}}
type OptionValue<Options extends SelectOptions> = string
```

Ce que reçoit `run` pour une option choisie, typé d’après la déclaration : l’union des textes d’une liste, des valeurs d’un objet, ou de la `value` de chaque `RichOption`.

[Documentation de Discord](https://docs.discord.com/developers/components/reference#string-select-select-option-structure)

## SelectContext

Ce que reçoit `run` quand quelque chose est choisi : tout ce qu’a [InteractiveContext](https://www.chapterjs.org/fr/reference/button.md#interactivecontext), l’endroit tel que le donne [PlaceOf](https://www.chapterjs.org/fr/reference/button.md#placeof) avec une [ComponentInteraction](https://www.chapterjs.org/fr/reference/interaction.md#componentinteraction), et :

**values** `Picked[]` *required*

Ce qui a été choisi, dans l’ordre du menu.

**value** `Picked | undefined` *required*

Le premier élément choisi ; `undefined` quand rien ne l’a été (un menu avec `min: 0`).

`Picked` est `OptionValue<Options>` pour un menu de textes, `User` pour `'user'`, `Role` pour `'role'`, `User | Role` pour `'mentionable'` et `Channel` pour `'channel'`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.