Skip to content
Merged
Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
"dependencies": {
"@astrojs/starlight": "^0.37.1",
"@bomb.sh/args": "^0.3.1",
"@clack/core": "^1.2.0",
"@clack/prompts": "^1.2.0",
"@clack/core": "^1.3.0",
"@clack/prompts": "^1.3.0",
"@types/node": "^22.19.3",
"@webcontainer/api": "^1.6.1",
"@webcontainer/snapshot": "^0.1.0",
Expand Down
52 changes: 27 additions & 25 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

49 changes: 46 additions & 3 deletions src/content/docs/clack/packages/prompts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,8 @@ const name = await text({

### Text Input

The text prompt accepts a single line of text.

```ts twoslash
// @errors: 2339 18048
import { text } from '@clack/prompts';
Expand All @@ -122,8 +124,19 @@ const name = await text({
<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>

Options:

- `message`: The prompt message shown to the user above the input.
- `placeholder`: A visual hint shown when the field has no content.
- `defaultValue`: A fallback value returned when the user provides nothing (empty input).
- `initialValue`: The starting value shown when the prompt first renders. Users can edit this value before submitting.
- `validate`: A function that validates user input. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
- All [Common Options](#common-options)

### Password Input

Behaves like the text component, but the input is masked.

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

Expand All @@ -147,9 +160,39 @@ const secret = await password({
<font color="#06989A">└</font></pre>

Options:
- `message`: The prompt message to display
- `mask`: Character used to mask input (default: `'▪'`)
- `clearOnError`: When `true`, clears the input field when validation fails (useful for security)

- `message`: The prompt message or question shown to the user above the input.
- `mask`: Character to use for masking input. Default: `'▪/•'`.
- `validate`: A function that validates user input. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
- `clearOnError`: When enabled it causes the input to be cleared if/when validation fails. Default: `false`.
- All [Common Options](#common-options)

Common options (`withGuide`, `signal`, `input`, `output`) are also supported.

### Multi-line Text

The multi-line component accepts multiple lines of text input. By default, pressing Enter twice submits the input.

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

const bio = await multiline({
message: 'Enter your bio',
placeholder: 'Tell us about yourself...',
showSubmit: true,
});
```

<pre class="cli-preview"><font color="#555753">│</font>
<font color="#06989A">◆</font> Enter your bio
<font color="#06989A">│</font> <span style="background-color:#FFFFFF"><font color="#181818">T</font></span><font color="#AAAAAA">ell us about yourself...</font>
<font color="#06989A">└</font>
<font color="#AAAAAA"> [ submit ]</font></pre>

Options:

- `showSubmit`: When enabled it shows a `[ submit ]` button that can be focused with tab. By default, pressing Enter twice submits the input. Default: `false`.
- All [Text Options](#text-input)

### Selection

Expand Down