From 30a5e9a032f57480f61551d4e178252d144dc63e Mon Sep 17 00:00:00 2001 From: "Willow (GHOST)" Date: Thu, 28 May 2026 13:42:31 -0700 Subject: [PATCH] docs: update `box`, `group`, and `group-multi-select` sections (#41) Co-authored-by: paul valladares <85648028+dreyfus92@users.noreply.github.com> --- src/content/docs/clack/packages/prompts.mdx | 47 +++++++++++++-------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/src/content/docs/clack/packages/prompts.mdx b/src/content/docs/clack/packages/prompts.mdx index 5f80980..be4f597 100644 --- a/src/content/docs/clack/packages/prompts.mdx +++ b/src/content/docs/clack/packages/prompts.mdx @@ -497,6 +497,8 @@ Options: ### Group Multiselect +The `groupMultiselect` prompt extends the [`multiselect`](#multiple-values) prompt to allow arranging distinct Multi-Selects, whilst keeping all of them interactive. + ```ts twoslash // @errors: 2353 import { groupMultiselect } from '@clack/prompts'; @@ -534,7 +536,7 @@ const projectOptions = await groupMultiselect({ ``` 
│
-◆  Define your project
+◆ Define your project
 │  ◼ Testing
 │  │ ◼ Jest (JavaScript testing framework)
 │  │ ◼ Playwright (End-to-end testing)
@@ -551,15 +553,21 @@ const projectOptions = await groupMultiselect({
 │  └ ◼ Biome.js (Formatter and linter)
 └
-The `groupMultiselect` prompt supports two additional options: -- `groupSpacing`: An integer that specifies how many new lines to add between each group. This helps improve readability when you have many groups. -- `selectableGroups`: A boolean that determines whether top-level groups can be selected. When set to `false`, only individual items within groups can be selected. +Options: + +- `message`: The message or question shown to the user above the input. +- `options`: Grouped options to display. Each key is a group label, and each value is an array of options. +- `initialValues`: The initially selected option(s). +- `maxItems`: The maximum number of items/options to display at once. +- `required`: When `true` at least one option must be selected (default: `true`). +- `cursorAt`: The value the cursor should be positioned at initially. +- `selectableGroups`: Whether entire groups can be selected at once (default: `true`). +- `groupSpacing`: Number of blank lines between groups (default: `0`). +- All [Common Options](#common-options) ### Group -The `group` function provides a convenient API for combining a series of questions. -Each question receives the `results` of previous answers. -The `group` function returns an object containing the result of every question. +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. ```ts twoslash import { group, text, password } from '@clack/prompts'; @@ -586,16 +594,20 @@ const account = await group({ ``` 
│
-◇  What is your email address?
+◇ What is your email address?
 │  user.name@example.com
 │
-◇  What is your username?
+◇ What is your username?
 │  bomb_sh
 │
-◆  Define your password
+◆ Define your password
 │  ▪▪▪▪▪▪▪▪▪▪▪▪_
 └
+Options: + +- `onCancel`: Called when any one of the prompts is canceled. + ### Tasks The `tasks` function provides a convenient API for sequencing several asynchronous actions one after the other. @@ -902,13 +914,14 @@ box('This is the content of the box', 'Box Title', { │ ╰──────────────────────────────╯ Options: -- `contentAlign`: Alignment of the content (`'left'`, `'center'`, or `'right'`) -- `titleAlign`: Alignment of the title (`'left'`, `'center'`, or `'right'`) -- `width`: Box width - use `'auto'` to fit content or a number for fixed width -- `titlePadding`: Padding around the title -- `contentPadding`: Padding around the content -- `rounded`: Use rounded corners when `true` (default), square corners when `false` -- `formatBorder`: Custom function to style the border characters + +- `contentAlign`: Alignment of the content (`'left'`, `'center'`, or `'right'`. default `'left'`). +- `titleAlign`: Alignment of the title (`'left'`, `'center'`, or `'right'`. default `'left'`). +- `width`: The width of the box, either `'auto'` to fit the content or a number for a fixed width (default: `'auto'`). +- `titlePadding`: Padding around the title (default: `1`). +- `contentPadding`: Padding around the content (default: `2`). +- `rounded`: Use rounded corners when `true` (default), square corners when `false` (default: `true`). +- `formatBorder`: Custom function to style the border characters. ### Task Log -- 2.51.2