Skip to content

Commit 663ae0d

Browse files
authored
docs(@clack/prompts): document missing prompt APIs in README (#503)
1 parent 814ab9a commit 663ae0d

1 file changed

Lines changed: 81 additions & 1 deletion

File tree

packages/prompts/README.md

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Effortlessly build beautiful command-line apps 🪄 [Try the demo](https://stack
1111
- 🤏 80% smaller than other options
1212
- 💎 Beautiful, minimal UI
1313
- ✅ Simple API
14-
- 🧱 Comes with `text`, `confirm`, `select`, `multiselect`, and `spinner` components
14+
- 🧱 Comes with `text`, `password`, `confirm`, `date`, `select`, `autocomplete`, `selectKey`, `multiselect`, `path`, and `spinner` components
1515

1616
## Basics
1717

@@ -63,6 +63,22 @@ const meaning = await text({
6363
});
6464
```
6565

66+
### Password
67+
68+
The password component behaves like `text`, but masks the input as the user types.
69+
70+
```js
71+
import { password } from '@clack/prompts';
72+
73+
const secret = await password({
74+
message: 'Set a password.',
75+
mask: '*',
76+
validate(value) {
77+
if (!value || value.length < 8) return 'Password must be at least 8 characters.';
78+
},
79+
});
80+
```
81+
6682
### Confirm
6783

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

94+
### Date
95+
96+
The date component accepts a calendar date and returns a `Date` value.
97+
98+
```js
99+
import { date } from '@clack/prompts';
100+
101+
const dueDate = await date({
102+
message: 'Pick a due date.',
103+
format: 'YMD',
104+
minDate: new Date(Date.UTC(2026, 0, 1)),
105+
maxDate: new Date(Date.UTC(2026, 11, 31)),
106+
});
107+
```
108+
78109
### Select
79110

80111
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.
@@ -92,6 +123,42 @@ const projectType = await select({
92123
});
93124
```
94125

126+
### Autocomplete
127+
128+
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`.
129+
130+
```js
131+
import { autocomplete } from '@clack/prompts';
132+
133+
const framework = await autocomplete({
134+
message: 'Pick a framework.',
135+
placeholder: 'Type to search...',
136+
options: [
137+
{ value: 'next', label: 'Next.js' },
138+
{ value: 'nuxt', label: 'Nuxt' },
139+
{ value: 'sveltekit', label: 'SvelteKit' },
140+
{ value: 'remix', label: 'Remix' },
141+
],
142+
});
143+
```
144+
145+
### Select Key
146+
147+
The `selectKey` component lets a user choose an option by pressing its single-character string `value` key directly.
148+
149+
```js
150+
import { selectKey } from '@clack/prompts';
151+
152+
const action = await selectKey({
153+
message: 'Pick an action.',
154+
options: [
155+
{ value: 'd', label: 'Deploy' },
156+
{ value: 't', label: 'Run tests' },
157+
{ value: 'q', label: 'Quit' },
158+
],
159+
});
160+
```
161+
95162
### Multi-Select
96163

97164
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.
@@ -157,6 +224,19 @@ const bio = await multiline({
157224
});
158225
```
159226

227+
### Path
228+
229+
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.
230+
231+
```js
232+
import { path } from '@clack/prompts';
233+
234+
const targetDir = await path({
235+
message: 'Select an existing directory.',
236+
directory: true,
237+
});
238+
```
239+
160240
### Spinner
161241

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

0 commit comments

Comments
 (0)