How To Create Interactive Command-line Prompts with Inquirer.js

Introduction

Inquirer.js is a collection of common interactive command-line user interfaces. This includes typing answers to questions or selecting a choice from a list.

The inquirer package provides several default prompts and is highly configurable. It is also extensible by way of a plug-in interface. It even supports promises and async/await syntax.

In this article, you will install and explore some of the features of Inquirer.js.

Prerequisites

If you would like to follow along with this article, you will need:

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

This tutorial was verified with Node v15.14.0, npm v7.10.0, and inquirer v8.0.0.

Step 1 — Setting Up the Project

First, open your terminal window and create a new project directory:

mkdir inquirer-example

Then, navigate to this directory:

cd inquirer-example

To start adding prompts to your Node.js scripts, you will need to install the inquirer package:

At this point, you have a new project ready to use Inquirer.js.

Step 2 — Creating Prompts

Now, create a new index.js file in your project directory and open it with your code editor.

Within your script, be sure to require inquirer:

const inquirer = require('inquirer');

Add a prompt asking the user for their favorite reptile:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

Revisit your terminal window and run the script:

You will be presented with a prompt:

Providing an answer will display the response:

You can provide a default value that allows the user to press ENTER without submitting any answer:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.faveReptile);
  });

Run the script again, and you will be presented with a prompt:

Pressing ENTER without an answer will submit the default answer:

Now, you can create prompts and set default values.

Step 3 — Creating Multiple Prompts

You may have noticed the .prompt() method accepts an array or objects. That’s because you can string a series of prompt questions together and all of the answers will be available by name as part of the answers variable once all of the prompts have been resolved.

Revisit index.js in your code editor and add a prompt asking the user for their favorite color:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      name: 'faveReptile',
      message: 'What is your favorite reptile?',
      default: 'Alligators'
    },
    {
      name: 'faveColor',
      message: 'What is your favorite color?',
      default: '#008f68'
    },
  ])
  .then(answers => {
    console.info('Answers:', answers);
  });

Run the script again, and you will be presented with two prompts:

Now, you can create multiple prompts.

Step 4 — Using Lists, Raw Lists, Expandable Lists, Checkboxes, Passwords, and Editors

inquirer does support more than prompting a user for text input. For the sake of example, the following types will be showcased by themselves but you very well could chain them together by passing them in the same array.

The list type allows you to present the user with a fixed set of options to pick from, instead of a free form input as the input type provides:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'list',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

Revisit your terminal window and run the script:

You will be presented with a list prompt:

The user can ARROW UP and ARROW DOWN keys to navigate the list of choices. j and k keyboard navigation is also available.

Raw List

The rawlist type is similar to list. It displays a list of choices and allows the user to enter the index of their choice (starting at 1):

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'rawlist',
      name: 'reptile',
      message: 'Which is better?',
      choices: ['alligator', 'crocodile'],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

Revisit your terminal window and run the script:

You will be presented with a rawlist prompt:

Submitting an invalid value will result in a "Please enter a valid index" error.

Expandable List

The expand type is reminiscent of some command-line applications that present you with a list of characters that map to functionality that can be entered. expand prompts will initially present the user with a list of the available character values and give context to them when the key is pressed:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'expand',
      name: 'reptile',
      message: 'Which is better?',
      choices: [
        {
          key: 'a',
          value: 'alligator',
        },
        {
          key: 'c',
          value: 'crocodile',
        },
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptile);
  });

Revisit your terminal window and run the script:

You will be presented with a expand prompt:

By default, the H option is included which stands for "Help" and upon entering H and hitting ENTER will switch to a list of the options, indexed by their characters that can then be entered to make a selection.

Submitting an invalid value will result in a "Please enter a valid command" error.

Checkbox

The checkbox type is also similar to list. Instead of a single selection, it allows you to select multiple choices.

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'checkbox',
      name: 'reptiles',
      message: 'Which reptiles do you love?',
      choices: [
        'Alligators', 'Snakes', 'Turtles', 'Lizards',
      ],
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.reptiles);
  });

Revisit your terminal window and run the script:

You will be presented with a checkbox prompt:

Similar to the other list types, you can use the arrow keys to navigate. To make a selection, you hit SPACE and can also select all with a or invert your selection with i.

Unlike the other prompt types, the answer for this prompt type will return an array instead of a string. It will always return an array, even if the user opted to not select any items.

Password

The password type will hide input from the user. This allows users to provide sensitive information that should not be seen:

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'password',
      name: 'secret',
      message: 'Tell me a secret',
    },
  ])
  .then(answers => {
    // Displaying the password for debug purposes only.
    console.info('Answer:', answers.secret);
  });

Revisit your terminal window and run the script:

You will be presented with a password prompt:

The input is hidden from the user.

Editor

The editor type allows users to use their default text editor for larger text inputs.

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'editor',
      name: 'story',
      message: 'Tell me a story, a really long one!',
    },
  ])
  .then(answers => {
    console.info('Answer:', answers.story);
  });

Revisit your terminal window and run the script:

You will be presented with an editor prompt:

inquirer will attempt to open a text editor on the user’s system based on the value of the $EDITOR and $VISUAL environment variables. If neither are present, vim (Linux) and notepad.exe (Windows) will be used instead.

Conclusion

In this article, you installed and explored some of the features of Inquirer.js. This tool can be useful for retrieving information from users.

Continue your learning with some of the plugins. Like inquirer-autocomplete-prompt, inquirer-search-list, and inquirer-table-prompt.