Prompts

The @clack/prompts package provides a collection of pre-built, high-level prompts that make it easy to create interactive command-line interfaces. It builds on top of the core package to provide a more developer-friendly experience.

Key Features

Pre-built prompts: Ready-to-use prompt components
Consistent styling: Unified look and feel across all prompts
Type-safe: Full TypeScript support
Customizable: Easy to extend and modify

Available Prompts

Text Input

import { 
const text: (opts: TextOptions) => Promise<string | symbol>
text } from '@clack/prompts';

const 
const name: string | symbol
name = await 
function text(opts: TextOptions): Promise<string | symbol>
text({
  
TextOptions.message: string
message: 'What is your name?',
  
TextOptions.placeholder?: string
placeholder: 'John Doe',
  
TextOptions.validate?: (value: string) => string | Error | undefined
validate: (
value: string
value) => {
    if (
value: string
value.
String.length: number
Returns the length of a String object.
length < 2) return 'Name must be at least 2 characters';
    return 
var undefined
undefined;
  },
});

│
◆  What is your name?
│  John Doe
└

Password Input

import { 
const password: (opts: PasswordOptions) => Promise<string | symbol>
password } from '@clack/prompts';

const 
const secret: string | symbol
secret = await 
function password(opts: PasswordOptions): Promise<string | symbol>
password({
  
PasswordOptions.message: string
message: 'What is your password?',
  
PasswordOptions.mask?: string
mask: '*',
  
PasswordOptions.validate?: (value: string) => string | Error | undefined
validate: (
value: string
value) => {
    if (
value: string
value.
String.length: number
Returns the length of a String object.
length < 8) return 'Your password must be at least 8 characters';
    if (!/[A-Z]/.
RegExp.test(string: string): boolean
Returns a Boolean value that indicates whether or not a pattern exists in a searched string.
@param ― string String on which to perform the search.
test(
value: string
value)) return 'Your password must be least contain 1 uppercase letter';
    if (!/[0-9]/.
RegExp.test(string: string): boolean
Returns a Boolean value that indicates whether or not a pattern exists in a searched string.
@param ― string String on which to perform the search.
test(
value: string
value)) return 'Your password must be least contain 1 number';
    if (!/[*?!@&]/.
RegExp.test(string: string): boolean
Returns a Boolean value that indicates whether or not a pattern exists in a searched string.
@param ― string String on which to perform the search.
test(
value: string
value)) return 'Your password must be least contain 1 special characters (*?!@&)';
    return 
var undefined
undefined;
  },
});

│
◆  What is your password?
│  *****_
└

Selection

Simple value

import { 
const select: <Value>(opts: SelectOptions<Value>) => Promise<symbol | Value>
select } from '@clack/prompts';

const 
const framework: symbol | "next" | "astro" | "svelte"
framework = await 
select<"next" | "astro" | "svelte">(opts: SelectOptions<"next" | "astro" | "svelte">): Promise<symbol | "next" | "astro" | "svelte">
select({
  
SelectOptions<Value>.message: string
message: 'Pick a framework',
  
SelectOptions<"next" | "astro" | "svelte">.options: ({
    value: "next";
    label?: string;
    hint?: string;
} | {
    value: "astro";
    label?: string;
    hint?: string;
} | {
    value: "svelte";
    label?: string;
    hint?: string;
})[]
options: [
    { 
value: "next"
Internal data for this option.
value: 'next', 
label?: string
The optional, user-facing text for this option.
By default, the value is converted to a string.
label: 'Next.js' },
    { 
value: "astro"
Internal data for this option.
value: 'astro', 
label?: string
The optional, user-facing text for this option.
By default, the value is converted to a string.
label: 'Astro' },
    { 
value: "svelte"
Internal data for this option.
value: 'svelte', 
label?: string
The optional, user-facing text for this option.
By default, the value is converted to a string.
label: 'SvelteKit' },
  ],
});

│
◆  Pick a framework
│  ● Next.js
│  ○ Astro
│  ○ SvelteKit
└

Complex value

import { 
const select: <Value>(opts: SelectOptions<Value>) => Promise<symbol | Value>
select } from '@clack/prompts';

const 
const framework: symbol | {
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
}
framework = await 
select<{
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
}>(opts: SelectOptions<{
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
}>): Promise<...>
select({
  
SelectOptions<Value>.message: string
message: 'Pick a framework',
  
SelectOptions<{ framework: string; language: string; } | { framework: null; language: string; }>.options: ({
    value: {
        framework: string;
        language: string;
    };
    label: string;
    hint?: string;
} | {
    value: {
        framework: null;
        language: string;
    };
    label: string;
    hint?: string;
})[]
options: [
    { 
value: {
    framework: string;
    language: string;
}
value: { 
framework: string
framework: 'Next', 
language: string
language: 'React' }, 
label: string
Required. The user-facing text for this option.
label: 'Next.js' },
    { 
value: {
    framework: null;
    language: string;
}
value: { 
framework: null
framework: null, 
language: string
language: 'Astro' }, 
label: string
Required. The user-facing text for this option.
label: 'Astro' },
    { 
value: {
    framework: string;
    language: string;
}
value: { 
framework: string
framework: 'Sveltekit', 
language: string
language: 'Svelte' }, 
label: string
Required. The user-facing text for this option.
label: 'SvelteKit' },
  ],
});

│
◆  Pick a framework
│  ● Next.js
│  ○ Astro
│  ○ SvelteKit
└

Multiple values

import { 
const multiselect: <Value>(opts: MultiSelectOptions<Value>) => Promise<symbol | Value[]>
multiselect } from '@clack/prompts';

const 
const framework: symbol | ({
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
})[]
framework = await 
multiselect<{
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
}>(opts: MultiSelectOptions<{
    framework: string;
    language: string;
} | {
    framework: null;
    language: string;
}>): Promise<...>
multiselect({
  
MultiSelectOptions<Value>.message: string
message: 'Pick a framework',
  
MultiSelectOptions<{ framework: string; language: string; } | { framework: null; language: string; }>.options: ({
    value: {
        framework: string;
        language: string;
    };
    label: string;
    hint?: string;
} | {
    value: {
        framework: null;
        language: string;
    };
    label: string;
    hint?: string;
})[]
options: [
    { 
value: {
    framework: string;
    language: string;
}
value: { 
framework: string
framework: 'Next', 
language: string
language: 'React' }, 
label: string
Required. The user-facing text for this option.
label: 'Next.js' },
    { 
value: {
    framework: null;
    language: string;
}
value: { 
framework: null
framework: null, 
language: string
language: 'Astro' }, 
label: string
Required. The user-facing text for this option.
label: 'Astro' },
    { 
value: {
    framework: string;
    language: string;
}
value: { 
framework: string
framework: 'Sveltekit', 
language: string
language: 'Svelte' }, 
label: string
Required. The user-facing text for this option.
label: 'SvelteKit' },
  ],
});

│
◆  Pick a framework
│  ◼ Next.js
│  ◻ Astro
│  ◻ SvelteKit
└

Confirmation

import { 
const confirm: (opts: ConfirmOptions) => Promise<boolean | symbol>
confirm } from '@clack/prompts';

const 
const shouldProceed: boolean | symbol
shouldProceed = await 
function confirm(opts: ConfirmOptions): Promise<boolean | symbol>
confirm({
  
ConfirmOptions.message: string
message: 'Do you want to continue?',
});

│
◆  Do you want to continue?
│  ● Yes / ○ No
└

Installation

npm install @clack/prompts

Usage

The prompts package is designed to be intuitive and easy to use. Each prompt function returns a Promise that resolves to the user’s input.

For more detailed examples and advanced usage patterns, check out our examples guide and best practices.