---
title: Prompts
description: Learn about the prompts package and its capabilities
---

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
```ts twoslash
// @errors: 2339
import { text } from '@clack/prompts';

const name = await text({
  message: 'What is your name?',
  placeholder: 'John Doe',
  validate: (value) => {
    if (value.length < 2) return 'Name must be at least 2 characters';
    return undefined;
  },
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  What is your name?
<font color="#06989A">│</font>  <span style="background-color:#FFFFFF"><font color="#181818">J</font></span><font color="#AAAAAA">ohn Doe</font>
<font color="#06989A">└</font></pre>

### Password Input
```ts twoslash
import { password } from '@clack/prompts';

const secret = await password({
  message: 'What is your password?',
  mask: '*',
  validate: (value) => {
    if (value.length < 8) return 'Your password must be at least 8 characters';
    if (!/[A-Z]/.test(value)) return 'Your password must be least contain 1 uppercase letter';
    if (!/[0-9]/.test(value)) return 'Your password must be least contain 1 number';
    if (!/[*?!@&]/.test(value)) return 'Your password must be least contain 1 special characters (*?!@&)';
    return undefined;
  },
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  What is your password?
<font color="#06989A">│</font>  *****<span style="background-color:#FFFFFF"><font color="#FFFFFF">_</font></span>
<font color="#06989A">└</font></pre>

### Selection

#### Simple value

```ts twoslash
import { select } from '@clack/prompts';

const framework = await select({
  message: 'Pick a framework',
  options: [
    { value: 'next', label: 'Next.js' },
    { value: 'astro', label: 'Astro' },
    { value: 'svelte', label: 'SvelteKit' },
  ],
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  Pick a framework
<font color="#06989A">│</font>  <font color="#4E9A06">●</font> Next.js
<font color="#06989A">│</font>  ○ Astro
<font color="#06989A">│</font>  ○ SvelteKit
<font color="#06989A">└</font></pre>

#### Complex value

```ts twoslash
import { select } from '@clack/prompts';

const framework = await select({
  message: 'Pick a framework',
  options: [
    { value: { framework: 'Next', language: 'React' }, label: 'Next.js' },
    { value: { framework: null, language: 'Astro' }, label: 'Astro' },
    { value: { framework: 'Sveltekit', language: 'Svelte' }, label: 'SvelteKit' },
  ],
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  Pick a framework
<font color="#06989A">│</font>  <font color="#4E9A06">●</font> Next.js
<font color="#06989A">│</font>  ○ Astro
<font color="#06989A">│</font>  ○ SvelteKit
<font color="#06989A">└</font></pre>

#### Multiple values

```ts twoslash
import { multiselect } from '@clack/prompts';

const framework = await multiselect({
  message: 'Pick a framework',
  options: [
    { value: { framework: 'Next', language: 'React' }, label: 'Next.js' },
    { value: { framework: null, language: 'Astro' }, label: 'Astro' },
    { value: { framework: 'Sveltekit', language: 'Svelte' }, label: 'SvelteKit' },
  ],
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  Pick a framework
<font color="#06989A">│</font>  <font color="#4E9A06">◼</font> Next.js
<font color="#06989A">│</font>  <font color="#06989A">◻</font> Astro
<font color="#06989A">│</font>  ◻ SvelteKit
<font color="#06989A">└</font></pre>

### Confirmation

```ts twoslash
import { confirm } from '@clack/prompts';

const shouldProceed = await confirm({
  message: 'Do you want to continue?',
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font>  Do you want to continue?
<font color="#06989A">│</font>  <font color="#4E9A06">●</font> Yes / ○ No
<font color="#06989A">└</font></pre>

## Support functions

### Intro

```ts twoslash
import { intro } from '@clack/prompts';

intro('Welcome to clack')
```

<pre class="cli-preview"><font color="#555753">┌</font>  Welcome to clack</pre>

### Outro

```ts twoslash
import { outro } from '@clack/prompts';

outro('All operations are finished')
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#555753">└</font>  All operations are finished</pre>

### Note

```ts twoslash
import { note } from '@clack/prompts';

note(
  'You can edit the file src/index.jsx',
  'Next steps.'
);
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#4E9A06">◇</font>  Next steps. <font color="#555753">─────────────────────────╮</font>
<font color="#555753">│</font>                                       <font color="#555753">│</font>
<font color="#555753">│</font>  You can edit the file src/index.jsx  <font color="#555753">│</font>
<font color="#555753">│</font>                                       <font color="#555753">│</font>
<font color="#555753">├───────────────────────────────────────╯</font></pre>

The second parameter (the title) is optional
```ts twoslash
import { note } from '@clack/prompts';

note(
  'All files have been created.',
);
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#4E9A06">◇</font>   <font color="#555753">─────────────────────────────╮</font>
<font color="#555753">│</font>                                <font color="#555753">│</font>
<font color="#555753">│</font>  All files have been created.  <font color="#555753">│</font>
<font color="#555753">│</font>                                <font color="#555753">│</font>
<font color="#555753">├────────────────────────────────╯</font></pre>

### Logs

```ts twoslash
import { log } from '@clack/prompts';

log.step('Check files')
log.info('No files to update')
log.message('Entering directory "src"')
log.error('Permission denied on file src/secret.js')
log.success('Installation complete')
log.warn('Directory is empty, skipping')
log.warning('Directory is empty, skipping')
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#4E9A06">◇</font>  Check files
<font color="#555753">│</font>
<font color="#3465A4">●</font>  No files to update
<font color="#555753">│</font>
<font color="#555753">│</font>  Entering directory &quot;src&quot;
    <font color="#555753">│</font>
<font color="#CC0000">■</font>  Permission denied on file src/secret.js
<font color="#555753">│</font>
<font color="#4E9A06">◆</font>  Installation complete
<font color="#555753">│</font>
<font color="#C4A000">▲</font>  Directory is empty, skipping
<font color="#555753">│</font>
<font color="#C4A000">▲</font>  Directory is empty, skipping</pre>

## Installation

```bash
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](/docs/guides/examples) and [best practices](/docs/guides/best-practices). 