Skip to content

Commit e78749e

Browse files
authored
docs: add multi-line text and update text/password sections (#39)
* docs: add multi-line text and update text/password sections * deps: update clack
1 parent 9457057 commit e78749e

3 files changed

Lines changed: 75 additions & 30 deletions

File tree

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"dependencies": {
1515
"@astrojs/starlight": "^0.37.1",
1616
"@bomb.sh/args": "^0.3.1",
17-
"@clack/core": "^1.2.0",
18-
"@clack/prompts": "^1.2.0",
17+
"@clack/core": "^1.3.0",
18+
"@clack/prompts": "^1.3.0",
1919
"@types/node": "^22.19.3",
2020
"@webcontainer/api": "^1.6.1",
2121
"@webcontainer/snapshot": "^0.1.0",

pnpm-lock.yaml

Lines changed: 27 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ const name = await text({
103103

104104
### Text Input
105105

106+
The text prompt accepts a single line of text.
107+
106108
```ts twoslash
107109
// @errors: 2339 18048
108110
import { text } from '@clack/prompts';
@@ -122,8 +124,19 @@ const name = await text({
122124
<font color="#06989A">│</font> <span style="background-color:#FFFFFF"><font color="#181818">J</font></span><font color="#AAAAAA">ohn Doe</font>
123125
<font color="#06989A">└</font></pre>
124126

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

138+
Behaves like the text component, but the input is masked.
139+
127140
```ts twoslash
128141
import { password } from '@clack/prompts';
129142

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

149162
Options:
150-
- `message`: The prompt message to display
151-
- `mask`: Character used to mask input (default: `'▪'`)
152-
- `clearOnError`: When `true`, clears the input field when validation fails (useful for security)
163+
164+
- `message`: The prompt message or question shown to the user above the input.
165+
- `mask`: Character to use for masking input. Default: `'▪/•'`.
166+
- `validate`: A function that validates user input. Return a `string` or `Error` to show as a validation error, or `undefined` to accept the result.
167+
- `clearOnError`: When enabled it causes the input to be cleared if/when validation fails. Default: `false`.
168+
- All [Common Options](#common-options)
169+
170+
Common options (`withGuide`, `signal`, `input`, `output`) are also supported.
171+
172+
### Multi-line Text
173+
174+
The multi-line component accepts multiple lines of text input. By default, pressing Enter twice submits the input.
175+
176+
```ts twoslash
177+
import { multiline } from '@clack/prompts';
178+
179+
const bio = await multiline({
180+
message: 'Enter your bio',
181+
placeholder: 'Tell us about yourself...',
182+
showSubmit: true,
183+
});
184+
```
185+
186+
<pre class="cli-preview"><font color="#555753">│</font>
187+
<font color="#06989A">◆</font> Enter your bio
188+
<font color="#06989A">│</font> <span style="background-color:#FFFFFF"><font color="#181818">T</font></span><font color="#AAAAAA">ell us about yourself...</font>
189+
<font color="#06989A">└</font>
190+
<font color="#AAAAAA"> [ submit ]</font></pre>
191+
192+
Options:
193+
194+
- `showSubmit`: When enabled it shows a `[ submit ]` button that can be focused with tab. By default, pressing Enter twice submits the input. Default: `false`.
195+
- All [Text Options](#text-input)
153196

154197
### Selection
155198

0 commit comments

Comments
 (0)