@inquirer/checkbox
TypeScript icon, indicating that this package has built-in type declarations

4.0.2 • Public • Published

@inquirer/checkbox

Simple interactive command line prompt to display a list of checkboxes (multi select).

Checkbox prompt

Installation

npm yarn
npm install @inquirer/prompts
yarn add @inquirer/prompts
Or
npm install @inquirer/checkbox
yarn add @inquirer/checkbox

Usage

import { checkbox, Separator } from '@inquirer/prompts';
// Or
// import checkbox, { Separator } from '@inquirer/checkbox';

const answer = await checkbox({
  message: 'Select a package manager',
  choices: [
    { name: 'npm', value: 'npm' },
    { name: 'yarn', value: 'yarn' },
    new Separator(),
    { name: 'pnpm', value: 'pnpm', disabled: true },
    {
      name: 'pnpm',
      value: 'pnpm',
      disabled: '(pnpm is not available)',
    },
  ],
});

Options

Property Type Required Description
message string yes The question to ask
choices Choice[] yes List of the available choices.
pageSize number no By default, lists of choice longer than 7 will be paginated. Use this option to control how many choices will appear on the screen at once.
loop boolean no Defaults to true. When set to false, the cursor will be constrained to the top and bottom of the choice list without looping.
required boolean no When set to true, ensures at least one choice must be selected.
validate async (Choice[]) => boolean | string no On submit, validate the choices. When returning a string, it'll be used as the error message displayed to the user. Note: returning a rejected promise, we'll assume a code error happened and crash.
theme See Theming no Customize look of the prompt.

Separator objects can be used in the choices array to render non-selectable lines in the choice list. By default it'll render a line, but you can provide the text as argument (new Separator('-- Dependencies --')). This option is often used to add labels to groups within long list of options.

Choice object

The Choice object is typed as

type Choice<Value> = {
  value: Value;
  name?: string;
  description?: string;
  short?: string;
  checked?: boolean;
  disabled?: boolean | string;
};

Here's each property:

  • value: The value is what will be returned by await checkbox().
  • name: This is the string displayed in the choice list.
  • description: Option for a longer description string that'll appear under the list when the cursor highlight a given choice.
  • short: Once the prompt is done (press enter), we'll use short if defined to render next to the question. By default we'll use name.
  • checked: If true, the option will be checked by default.
  • disabled: Disallow the option from being selected. If disabled is a string, it'll be used as a help tip explaining why the choice isn't available.

Also note the choices array can contain Separators to help organize long lists.

choices can also be an array of string, in which case the string will be used both as the value and the name.

Theming

You can theme a prompt by passing a theme object option. The theme object only need to includes the keys you wish to modify, we'll fallback on the defaults for the rest.

type Theme = {
  prefix: string | { idle: string; done: string };
  spinner: {
    interval: number;
    frames: string[];
  };
  style: {
    answer: (text: string) => string;
    message: (text: string, status: 'idle' | 'done' | 'loading') => string;
    error: (text: string) => string;
    defaultAnswer: (text: string) => string;
    help: (text: string) => string;
    highlight: (text: string) => string;
    key: (text: string) => string;
    disabledChoice: (text: string) => string;
    description: (text: string) => string;
    renderSelectedChoices: <T>(
      selectedChoices: ReadonlyArray<Choice<T>>,
      allChoices: ReadonlyArray<Choice<T> | Separator>,
    ) => string;
  };
  icon: {
    checked: string;
    unchecked: string;
    cursor: string;
  };
  helpMode: 'always' | 'never' | 'auto';
};

theme.helpMode

  • auto (default): Hide the help tips after an interaction occurs. The scroll tip will hide after any interactions, the selection tip will hide as soon as a first selection is done.
  • always: The help tips will always show and never hide.
  • never: The help tips will never show.

License

Copyright (c) 2023 Simon Boudrias (twitter: @vaxilart)
Licensed under the MIT license.

Package Sidebar

Install

npm i @inquirer/checkbox

Weekly Downloads

2,367,686

Version

4.0.2

License

MIT

Unpacked Size

28.2 kB

Total Files

9

Last publish

Collaborators

  • sboudrias
  • danielchatfield
  • mischah