How to add default values to Form prompts

• What to expect
• Define a prompt
• Set an initial value.
• Use previously entered values with onChoice
• Next steps
• Related

What to expect

You should already know how to create a form prompt. In this guide we will look at different methods of defining initial/default values.

In this guide we will show you how to prefill fields.

We will …

• … set the initial property.
• … use the onChoice method to use previous field values.

Example

Default values example

Set an initial value.

In the last step of the previous guide (Getting started) we filled the choices: string[] | Choice[] with three fields.

The easiest way to define initial values is by adding the initial: string property to our fields.

const { prompt } = require("enquirer");

const results = prompt({
  choices: [
    {
      initial: "Jon",
      message: "First Name",
      name: "firstname"
    },
    // ...
  ],
  // ...
});

Use previously entered values with onChoice

We might want to reuse previously entered information in on of our fields.

Let's assume the username: (firstname + lastname).toLowerCase(). We can use the onChoice(s: State, c: Choice, i: number) method to grab previously entered values and use them for our suggestion.

const { prompt } = require("enquirer");

const results = prompt({
  choices: [
    // ...
    {
      message: "GitHub username",
      name: "username",
      onChoice(state, choice, i) {
        const { firstname, lastname } = this.values;
        choice.initial = `${firstname}${lastname}`.toLowerCase();
      }
    }
  ],
  // ...
});

We now have a complete form with initial values and some logic to define them.

Your form should now look like this.

const { prompt } = require("enquirer");

const results = prompt({
  choices: [
    {
      initial: "Jon",
      message: "First Name",
      name: "firstname"
    },
    {
      initial: "Schlinkert",
      message: "Last Name",
      name: "lastname"
    },
    {
      message: "GitHub username",
      name: "username",
      onChoice(state, choice, i) {
        const { firstname, lastname } = this.values;
        choice.initial = `${firstname}${lastname}`.toLowerCase();
      }
    }
  ],
  message: "Please provide the following information:",
  name: "user",
  type: "form"
});

Next steps

You should now be comfortable with initial values. In the next steps we will look at some options to add some spice to your form.

• ... tbd.

Related

• Getting started