diff --git a/examples/basic/index.ts b/examples/basic/index.ts index dccd786..a8f968c 100644 --- a/examples/basic/index.ts +++ b/examples/basic/index.ts @@ -1,6 +1,6 @@ import * as p from '@clack/prompts'; -import color from 'picocolors'; import { setTimeout } from 'node:timers/promises'; +import color from 'picocolors'; async function main() { console.clear(); @@ -11,14 +11,15 @@ async function main() { const project = await p.group( { - continue: () => p.selectKey({ - message: 'Use this commit message?', - options: [ - { value: 'y', label: 'yes' }, - { value: 'n', label: 'no' }, - { value: 'r', label: 'regenerate' }, - ] - }), + continue: () => + p.selectKey({ + message: 'Use this commit message?', + options: [ + { value: 'y', label: 'yes', hint: 'default' }, + { value: 'n', label: 'no' }, + { value: 'r', label: 'regenerate' }, + ], + }), path: () => p.text({ message: 'Where should we create your project?', diff --git a/packages/prompts/src/index.ts b/packages/prompts/src/index.ts index c669356..2c39168 100644 --- a/packages/prompts/src/index.ts +++ b/packages/prompts/src/index.ts @@ -230,7 +230,9 @@ export const selectKey = [], Value extends string> } else if (state === 'cancelled') { return `${color.strikethrough(color.dim(label))}`; } - return `${color.gray(color.bgWhite(color.inverse(` ${option.value} `)))} ${label}`; + return `${color.gray(color.bgWhite(color.inverse(` ${option.value} `)))} ${label} ${ + option.hint ? color.dim(`(${option.hint})`) : '' + }`; }; return new SelectKeyPrompt({