Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 81 additions & 1 deletion packages/prompts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Effortlessly build beautiful command-line apps 🪄 [Try the demo](https://stack
- 🤏 80% smaller than other options
- 💎 Beautiful, minimal UI
- ✅ Simple API
- 🧱 Comes with `text`, `confirm`, `select`, `multiselect`, and `spinner` components
- 🧱 Comes with `text`, `password`, `confirm`, `date`, `select`, `autocomplete`, `selectKey`, `multiselect`, `path`, and `spinner` components

## Basics

Expand Down Expand Up @@ -63,6 +63,22 @@ const meaning = await text({
});
```

### Password

The password component behaves like `text`, but masks the input as the user types.

```js
import { password } from '@clack/prompts';

const secret = await password({
message: 'Set a password.',
mask: '*',
validate(value) {
if (!value || value.length < 8) return 'Password must be at least 8 characters.';
},
});
```

### Confirm

The confirm component accepts a yes or no answer. The result is a boolean value of `true` or `false`.
Expand All @@ -75,6 +91,21 @@ const shouldContinue = await confirm({
});
```

### Date

The date component accepts a calendar date and returns a `Date` value.

```js
import { date } from '@clack/prompts';

const dueDate = await date({
message: 'Pick a due date.',
format: 'YMD',
minDate: new Date(Date.UTC(2026, 0, 1)),
maxDate: new Date(Date.UTC(2026, 11, 31)),
});
```

### Select

The select component allows a user to choose one value from a list of options. The result is the `value` prop of a given option.
Expand All @@ -92,6 +123,42 @@ const projectType = await select({
});
```

### Autocomplete

The autocomplete component lets a user filter a list by typing, then choose one option from the matching results. By default, matching uses each option's `label`, `hint`, and `value`. The result is the selected option's `value`.

```js
import { autocomplete } from '@clack/prompts';

const framework = await autocomplete({
message: 'Pick a framework.',
placeholder: 'Type to search...',
options: [
{ value: 'next', label: 'Next.js' },
{ value: 'nuxt', label: 'Nuxt' },
{ value: 'sveltekit', label: 'SvelteKit' },
{ value: 'remix', label: 'Remix' },
],
});
```

### Select Key

The `selectKey` component lets a user choose an option by pressing its single-character string `value` key directly.

```js
import { selectKey } from '@clack/prompts';

const action = await selectKey({
message: 'Pick an action.',
options: [
{ value: 'd', label: 'Deploy' },
{ value: 't', label: 'Run tests' },
{ value: 'q', label: 'Quit' },
],
});
```

### Multi-Select

The `multiselect` component allows a user to choose many values from a list of options. The result is an array with all selected `value` props.
Expand Down Expand Up @@ -157,6 +224,19 @@ const bio = await multiline({
});
```

### Path

The path component offers filesystem path suggestions and returns the selected path as a string. When `directory: true` is set, only directories can be selected.

```js
import { path } from '@clack/prompts';

const targetDir = await path({
message: 'Select an existing directory.',
directory: true,
});
```

### Spinner

The spinner component surfaces a pending action, such as a long-running download or dependency installation.
Expand Down
Loading