[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
docs: update `box`, `group`, and `group-multi-select` sections (#41)
Co-authored-by: paul valladares <85648028+dreyfus92@users.noreply.github.com>
authored by
Willow (GHOST)
paul valladares
and committed by
GitHub
(May 28, 2026, 3:42 PM -0500)
30a5e9a0
ea24f71d
+30
-17
+30
-17
src/content/docs/clack/packages/prompts.mdx
+30
-17
src/content/docs/clack/packages/prompts.mdx
···
497
497
498
498
### Group Multiselect
499
499
500
+
The `groupMultiselect` prompt extends the [`multiselect`](#multiple-values) prompt to allow arranging distinct Multi-Selects, whilst keeping all of them interactive.
501
+
500
502
```ts twoslash
501
503
// @errors: 2353
502
504
import { groupMultiselect } from '@clack/prompts';
···
534
536
```
535
537
536
538
<pre class="cli-preview"><font color="#555753">│</font>
537
-
<font color="#06989A">◆</font> Define your project
539
+
<font color="#06989A">◆</font> Define your project
538
540
<font color="#06989A">│</font> <font color="#4E9A06">◼</font> Testing
539
541
<font color="#06989A">│</font> │ <font color="#4E9A06">◼</font> Jest (JavaScript testing framework)
540
542
<font color="#06989A">│</font> │ <font color="#4E9A06">◼</font> Playwright (End-to-end testing)
···
551
553
<font color="#06989A">│</font> └ <font color="#4E9A06">◼</font> Biome.js (Formatter and linter)
552
554
<font color="#06989A">└</font></pre>
553
555
554
-
The `groupMultiselect` prompt supports two additional options:
555
-
- `groupSpacing`: An integer that specifies how many new lines to add between each group. This helps improve readability when you have many groups.
556
-
- `selectableGroups`: A boolean that determines whether top-level groups can be selected. When set to `false`, only individual items within groups can be selected.
556
+
Options:
557
+
558
+
- `message`: The message or question shown to the user above the input.
559
+
- `options`: Grouped options to display. Each key is a group label, and each value is an array of options.
560
+
- `initialValues`: The initially selected option(s).
561
+
- `maxItems`: The maximum number of items/options to display at once.
562
+
- `required`: When `true` at least one option must be selected (default: `true`).
563
+
- `cursorAt`: The value the cursor should be positioned at initially.
564
+
- `selectableGroups`: Whether entire groups can be selected at once (default: `true`).
565
+
- `groupSpacing`: Number of blank lines between groups (default: `0`).
566
+
- All [Common Options](#common-options)
557
567
558
568
### Group
559
569
560
-
The `group` function provides a convenient API for combining a series of questions.
561
-
Each question receives the `results` of previous answers.
562
-
The `group` function returns an object containing the result of every question.
570
+
The `group` utility provides a consistent way to combine a series of prompts, combining each answer into one object. Each prompt receives the results of all previously completed prompts, and are executed sequentially.
563
571
564
572
```ts twoslash
565
573
import { group, text, password } from '@clack/prompts';
···
586
594
```
587
595
588
596
<pre class="cli-preview"><font color="#555753">│</font>
589
-
<font color="#4E9A06">◇</font> What is your email address?
597
+
<font color="#4E9A06">◇</font> What is your email address?
590
598
<font color="#555753">│</font> user.name@example.com
591
599
<font color="#555753">│</font>
592
-
<font color="#4E9A06">◇</font> What is your username?
600
+
<font color="#4E9A06">◇</font> What is your username?
593
601
<font color="#555753">│</font> bomb_sh
594
602
<font color="#555753">│</font>
595
-
<font color="#06989A">◆</font> Define your password
603
+
<font color="#06989A">◆</font> Define your password
596
604
<font color="#06989A">│</font> ▪▪▪▪▪▪▪▪▪▪▪▪<span style="background-color:#FFFFFF"><font color="#FFFFFF">_</font></span>
597
605
<font color="#06989A">└</font></pre>
606
+
607
+
Options:
608
+
609
+
- `onCancel`: Called when any one of the prompts is canceled.
598
610
599
611
### Tasks
600
612
···
902
914
<font color="#555753">│</font> <font color="#555753">╰──────────────────────────────╯</font></pre>
903
915
904
916
Options:
905
-
- `contentAlign`: Alignment of the content (`'left'`, `'center'`, or `'right'`)
906
-
- `titleAlign`: Alignment of the title (`'left'`, `'center'`, or `'right'`)
907
-
- `width`: Box width - use `'auto'` to fit content or a number for fixed width
908
-
- `titlePadding`: Padding around the title
909
-
- `contentPadding`: Padding around the content
910
-
- `rounded`: Use rounded corners when `true` (default), square corners when `false`
911
-
- `formatBorder`: Custom function to style the border characters
917
+
918
+
- `contentAlign`: Alignment of the content (`'left'`, `'center'`, or `'right'`. default `'left'`).
919
+
- `titleAlign`: Alignment of the title (`'left'`, `'center'`, or `'right'`. default `'left'`).
920
+
- `width`: The width of the box, either `'auto'` to fit the content or a number for a fixed width (default: `'auto'`).
921
+
- `titlePadding`: Padding around the title (default: `1`).
922
+
- `contentPadding`: Padding around the content (default: `2`).
923
+
- `rounded`: Use rounded corners when `true` (default), square corners when `false` (default: `true`).
924
+
- `formatBorder`: Custom function to style the border characters.
912
925
913
926
### Task Log
914
927