Skip to content

Commit 459ff41

Browse files
committed
docs: update autocomplete, confirm, and path sections
1 parent e78749e commit 459ff41

1 file changed

Lines changed: 47 additions & 14 deletions

File tree

src/content/docs/clack/packages/prompts.mdx

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -331,19 +331,29 @@ const framework = await autocomplete({
331331
{ value: 'nuxt', label: 'Nuxt', hint: 'Vue framework' },
332332
],
333333
placeholder: 'Type to search...',
334-
maxItems: 5, // Maximum number of items to display at once
334+
maxItems: 5,
335335
});
336336
```
337337

338338
<pre class="cli-preview"><font color="#555753">│</font>
339-
<font color="#06989A">◆</font> Search for a framework
339+
<font color="#06989A">◆</font> Search for a framework
340340
<font color="#06989A">│</font> Search: <span style="background-color:#FFFFFF"><font color="#181818">n</font></span>
341341
<font color="#06989A">│</font> (2 matches)
342342
<font color="#06989A">│</font> ● Next.js (React framework)
343343
<font color="#06989A">│</font> ○ Nuxt (Vue framework)
344344
<font color="#06989A">└</font></pre>
345345

346-
If you set `placeholder` and the search field is **empty**, pressing **Tab** copies the placeholder string into the input (v1.2.0)—handy for default search tokens or quick acceptance of a suggested value.
346+
Options:
347+
348+
- `message`: The prompt message or question shown to the user above the input.
349+
- `options`: The options to present, or a function that returns the options to present allowing for custom search/filtering. [Learn more below](#dynamic-options-getter).
350+
- `maxItems`: The maximum number of items/options to display in the autocomplete list at once.
351+
- `placeholder`: Placeholder text displayed when the search field is empty. When set, pressing tab copies the placeholder into the input.
352+
- `validate`: A function that validates user input. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
353+
- `filter`: Custom filter function to match options against the search input.
354+
- `initialValue`: The initially selected option from the list.
355+
- `initialUserInput`: The starting value shown in the users input box.
356+
- All [Common Options](#common-options)
347357

348358
#### Dynamic options (getter)
349359

@@ -394,7 +404,7 @@ const picked = await autocomplete({
394404

395405
### Autocomplete Multiselect
396406

397-
The `autocompleteMultiselect` combines the search functionality of autocomplete with the ability to select multiple options.
407+
The `autocompleteMultiselect` prompt combines the search functionality of [autocomplete](#autocomplete) with the ability to select multiple options.
398408

399409
```ts twoslash
400410
import { autocompleteMultiselect } from '@clack/prompts';
@@ -414,16 +424,28 @@ const frameworks = await autocompleteMultiselect({
414424
```
415425

416426
<pre class="cli-preview"><font color="#555753">│</font>
417-
<font color="#06989A">◆</font> Select frameworks
427+
<font color="#06989A">◆</font> Select frameworks
418428
<font color="#06989A">│</font> Search: <span style="background-color:#FFFFFF"><font color="#181818">n</font></span>
419429
<font color="#06989A">│</font> (2 matches)
420430
<font color="#06989A">│</font> ◼ Next.js (React framework)
421431
<font color="#06989A">│</font> ◻ Nuxt (Vue framework)
422432
<font color="#06989A">└</font></pre>
423433

434+
Options:
435+
436+
- `message`: The prompt message or question shown to the user above the input.
437+
- `options`: The options to present, or a function that returns the options to present allowing for custom search/filtering. [Learn more below](#dynamic-options-getter).
438+
- `maxItems`: The maximum number of items/options to display in the autocomplete list at once.
439+
- `placeholder`: Placeholder text displayed when the search field is empty. When set, pressing tab copies the placeholder into the input.
440+
- `validate`: A function that validates user input. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
441+
- `filter`: Custom filter function to match options against the search input.
442+
- `initialValue`: The initially selected option(s) from the list.
443+
- `required`: When `true`, at least one option must be selected (default: `false`).
444+
- All [Common Options](#common-options)
445+
424446
### Path Selection
425447

426-
The `path` prompt provides an autocomplete-based file and directory path selection. It automatically suggests files and directories as the user types.
448+
The `path` prompt extends [`autocomplete`](#autocomplete) to provide file and directory suggestions.
427449

428450
```ts twoslash
429451
import { path } from '@clack/prompts';
@@ -445,11 +467,12 @@ const selectedPath = await path({
445467
<font color="#06989A">└</font></pre>
446468

447469
Options:
448-
- `message`: The prompt message to display
449-
- `root`: The starting directory for path suggestions (defaults to current working directory)
450-
- `directory`: When `true`, only **directories** appear in suggestions while you navigate; you still move through the tree normally (v1.2.0 fixes for directory-only mode).
451-
- `initialValue`: Pre-fill the path input. In **directory** mode, if `initialValue` already points at an existing directory, pressing **Enter** submits **that** directory immediately instead of jumping to the first child (v1.2.0).
452-
- `validate`: Custom validation function for the selected path
470+
- `message`: The prompt message or question shown to the user above the input.
471+
- `root`: The starting directory for path suggestions (defaults to current working directory).
472+
- `directory`: When `true`, only **directories** appear in suggestions while you navigate (v1.2.0 fixes for directory-only mode).
473+
- `initialValue`: The starting path shown when the prompt first renders, which users can edit before submitting. If not provided it will fall back to the given `root`, or the current working directory. In `directory` mode, if the initial value points to a directory that exists, pressing enter will submit the input instead of jumping to the first child (v1.2.0).
474+
- `validate`: A function that validates the given path. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
475+
- All [Common Options](#common-options)
453476

454477
### Date input
455478

@@ -476,6 +499,8 @@ Options include `defaultValue`, `initialValue`, `minDate`, `maxDate`, `validate`
476499

477500
### Confirmation
478501

502+
The `confirm` prompt accepts a yes or no choice, returning a boolean value corresponding to the user's selection.
503+
479504
```ts twoslash
480505
import { confirm } from '@clack/prompts';
481506

@@ -485,13 +510,21 @@ const shouldProceed = await confirm({
485510
```
486511

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

517+
:::tip
518+
Multi-line `message` strings wrap correctly; guide lines apply to wrapped confirmation text (v1.2.0).
519+
:::
520+
492521
Options:
493-
- `vertical: true`: Stack Yes / No vertically instead of inline (v1.0.1+).
494-
- Multi-line `message` strings wrap correctly; guide lines apply to wrapped confirmation text (v1.2.0).
522+
- `message`: The prompt message or question shown to the user above the input.
523+
- `active`: The label to use for the active (true) option (default: `Yes`).
524+
- `inactive`: The label to use for the inactive (false) option (default: `No`).
525+
- `initialValue`: The initial selected value (true or false) (default: `true`).
526+
- `vertical`: Whether to render the options vertically instead of horizontally (default: `false`) (v1.0.1+).
527+
- All [Common Options](#common-options)
495528

496529
## Grouping
497530

0 commit comments

Comments
 (0)