or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-api.mdcustom-prompts.mdform-survey-prompts.mdindex.mdselection-prompts.mdspecialized-prompts.mdtext-prompts.md
tile.json

selection-prompts.mddocs/

Selection Prompts

Selection prompts provide interactive interfaces for choosing from predefined options, including single selection, multiple selection, autocomplete search, and sortable lists.

Capabilities

Select Prompt

Single-choice selection prompt allowing users to pick one option from a list.

/**
 * Single selection prompt
 * @param options - Select prompt options
 * @returns Promise resolving to selected choice value
 */
function select(options);

interface SelectOptions extends BasePromptOptions {
  type: 'select';
  choices: (string | Choice)[];
  initial?: number | string;
  limit?: number;
  hint?: string;
  pointer?: string;
  indicator?: string;
}

Usage Examples:

const { prompt } = require('enquirer');

// Simple string choices
const response = await prompt({
  type: 'select',
  name: 'framework',
  message: 'Choose a framework',
  choices: ['React', 'Vue', 'Angular', 'Svelte']
});

// Choice objects with values
const response = await prompt({
  type: 'select',
  name: 'size',
  message: 'T-shirt size?',
  choices: [
    { name: 'Small', value: 'sm' },
    { name: 'Medium', value: 'md' },  
    { name: 'Large', value: 'lg' }
  ]
});

// With initial selection
const response = await prompt({
  type: 'select',
  name: 'env',
  message: 'Environment?',
  choices: ['development', 'staging', 'production'],
  initial: 'development'
});

MultiSelect Prompt

Multiple-choice selection prompt allowing users to select multiple options from a list.

/**
 * Multiple selection prompt
 * @param options - MultiSelect prompt options
 * @returns Promise resolving to array of selected values
 */
function multiselect(options);

interface MultiSelectOptions extends BasePromptOptions {
  type: 'multiselect';
  choices: (string | Choice)[];
  initial?: number | number[] | string | string[];
  limit?: number;
  hint?: string;
  maxChoices?: number;
}

Usage Examples:

// Basic multiselect
const response = await prompt({
  type: 'multiselect',
  name: 'features',
  message: 'Select features to include',
  choices: [
    'Authentication',
    'Database',  
    'Caching',
    'Testing',
    'Documentation'
  ]
});

// With choice objects and limits
const response = await prompt({
  type: 'multiselect',
  name: 'plugins',
  message: 'Select plugins (max 3)',
  choices: [
    { name: 'ESLint', value: 'eslint', hint: 'Code linting' },
    { name: 'Prettier', value: 'prettier', hint: 'Code formatting' },
    { name: 'Jest', value: 'jest', hint: 'Testing framework' },
    { name: 'Husky', value: 'husky', hint: 'Git hooks' }
  ],
  maxChoices: 3
});

// With initial selections
const response = await prompt({
  type: 'multiselect',
  name: 'tools',
  message: 'Development tools',
  choices: ['webpack', 'babel', 'typescript', 'sass'],
  initial: ['webpack', 'babel']
});

AutoComplete Prompt

Searchable selection prompt with typeahead functionality for filtering through large lists.

/**
 * Autocomplete/typeahead selection prompt
 * @param options - AutoComplete prompt options
 * @returns Promise resolving to selected choice value
 */
function autocomplete(options);

interface AutoCompleteOptions extends BasePromptOptions {
  type: 'autocomplete';
  choices: (string | Choice)[];
  initial?: number | string;
  limit?: number;
  suggest?: (input: string, choices: Choice[]) => Choice[];
}

Usage Examples:

// Basic autocomplete
const response = await prompt({
  type: 'autocomplete',
  name: 'country',
  message: 'Select country',
  choices: [
    'United States',
    'United Kingdom', 
    'Canada',
    'Australia',
    'Germany',
    'France',
    'Japan'
  ]
});

// With custom suggest function
const response = await prompt({
  type: 'autocomplete',
  name: 'library',
  message: 'Choose a library',
  choices: [
    { name: 'React', value: 'react' },
    { name: 'Redux', value: 'redux' },
    { name: 'Lodash', value: 'lodash' },
    { name: 'Moment.js', value: 'moment' }
  ],
  suggest: (input, choices) => {
    return choices.filter(choice => 
      choice.name.toLowerCase().includes(input.toLowerCase())
    );
  }
});

Sort Prompt

Interactive sortable list prompt allowing users to reorder items by dragging or using keyboard shortcuts.

/**
 * Sortable list prompt
 * @param options - Sort prompt options
 * @returns Promise resolving to array of reordered choices
 */
function sort(options);

interface SortOptions extends BasePromptOptions {
  type: 'sort';
  choices: (string | Choice)[];
  hint?: string;
  drag?: boolean;
  numbered?: boolean;
}

Usage Examples:

// Basic sort prompt
const response = await prompt({
  type: 'sort',
  name: 'priorities',
  message: 'Rank features by priority',
  choices: [
    'Performance',
    'Security',
    'User Experience', 
    'Maintainability',
    'Scalability'
  ]
});

// With numbered items
const response = await prompt({
  type: 'sort',
  name: 'tasks',
  message: 'Order tasks by importance',
  numbered: true,
  choices: [
    { name: 'Fix critical bug', value: 'bug-fix' },
    { name: 'Write documentation', value: 'docs' },
    { name: 'Update dependencies', value: 'deps' },
    { name: 'Add new feature', value: 'feature' }
  ]
});

Editable Prompt

Selection prompt that allows inline editing of choice values.

/**
 * Editable selection prompt with inline editing
 * @param options - Editable prompt options
 * @returns Promise resolving to edited choice value
 */
function editable(options);

interface EditableOptions extends BasePromptOptions {
  type: 'editable';
  choices: (string | Choice)[];
  initial?: number | string;
  hint?: string;
}

Usage Examples:

// Editable choices
const response = await prompt({
  type: 'editable',
  name: 'filename',
  message: 'Select or edit filename',
  choices: [
    'index.js',
    'app.js',
    'server.js',
    'config.js'
  ]
});

// User can select existing choice or press 'e' to edit
// Editing allows modification of the selected value

Choice Object Structure

interface Choice {
  name: string;          // Display name
  value?: unknown;       // Actual value (defaults to name)
  hint?: string;         // Help text shown to user
  role?: string;         // Special role (separator, etc.)
  enabled?: boolean;     // Initially enabled/selected
  disabled?: boolean | string; // Disabled with optional reason
}

Usage Examples:

const choices = [
  'Simple string choice',
  
  { 
    name: 'Advanced Option',
    value: 'advanced',
    hint: 'For experienced users'
  },
  
  {
    name: 'Coming Soon',
    value: 'soon', 
    disabled: 'Not yet available'
  },
  
  {
    name: '--- Separator ---',
    role: 'separator'
  }
];

Common Selection Options

All selection prompts support these common configuration options:

interface CommonSelectionOptions {
  choices: (string | Choice)[];
  initial?: number | string | number[] | string[];
  limit?: number;          // Max visible choices
  hint?: string;           // Help text
  pointer?: string;        // Selection indicator
  indicator?: string;      // Multi-select indicator
  footer?: string;         // Bottom help text
  header?: string;         // Top help text
}

Navigation and Display

Customize the appearance and navigation of selection prompts:

const response = await prompt({
  type: 'select',
  name: 'option',
  message: 'Choose an option',
  choices: ['Option 1', 'Option 2', 'Option 3'],
  limit: 5,
  pointer: '❯',
  hint: 'Use arrow keys to navigate',
  footer: 'Press Enter to select'
});