or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-selection.mdbase-prompt.mdconfirmation.mdindex.mdselection.mdtext-input.mdutilities.md
tile.json

text-input.mddocs/

Text Input Prompts

Text input functionality for collecting single-line and password input from users.

Capabilities

Text Prompt

Collects single-line text input from users with cursor support and optional validation.

/**
 * Prompt for collecting single-line text input
 */
class TextPrompt extends Prompt<string> {
  constructor(opts: TextOptions);
  
  /** Current value with cursor position indicator */
  valueWithCursor: string;
  /** Current cursor position in the input */
  cursor: number;
}

/**
 * Configuration options for TextPrompt
 */
interface TextOptions extends PromptOptions<TextPrompt> {
  /** Placeholder text shown when input is empty */
  placeholder?: string;
  /** Default value for the input */
  defaultValue?: string;
}

Usage Examples:

import { TextPrompt, isCancel } from '@clack/core';

// Basic text input
const namePrompt = new TextPrompt({
  render() {
    return `What's your name?\n${this.valueWithCursor}`;
  },
});

const name = await namePrompt.prompt();
if (isCancel(name)) {
  process.exit(0);
}

// Text input with placeholder and validation
const emailPrompt = new TextPrompt({
  render() {
    const placeholder = this.placeholder && !this.value 
      ? `\x1b[2m${this.placeholder}\x1b[22m` 
      : '';
    return `Enter your email:\n${this.valueWithCursor || placeholder}`;
  },
  placeholder: 'user@example.com',
  validate(value) {
    if (!value) return 'Email is required';
    if (!value.includes('@')) return 'Please enter a valid email';
  }
});

const email = await emailPrompt.prompt();

// Text input with default value
const projectPrompt = new TextPrompt({
  render() {
    return `Project name:\n${this.valueWithCursor}`;
  },
  defaultValue: 'my-project'
});

const projectName = await projectPrompt.prompt();

Password Prompt

Collects password input with masked display to hide sensitive information.

/**
 * Prompt for collecting password input with masked display
 */
class PasswordPrompt extends Prompt<string> {
  constructor(opts: PasswordOptions);
  
  /** Current value with cursor position indicator */
  valueWithCursor: string;
  /** Current cursor position in the input */
  cursor: number;
  /** Masked representation of the current value */
  masked: any;
}

/**
 * Configuration options for PasswordPrompt
 */
interface PasswordOptions extends PromptOptions<PasswordPrompt> {
  /** Character used to mask the password (defaults to '*') */
  mask?: string;
}

Usage Examples:

import { PasswordPrompt, isCancel } from '@clack/core';

// Basic password input
const passwordPrompt = new PasswordPrompt({
  render() {
    return `Enter password:\n${this.masked}`;
  },
});

const password = await passwordPrompt.prompt();
if (isCancel(password)) {
  process.exit(0);
}

// Password input with custom mask character
const secretPrompt = new PasswordPrompt({
  render() {
    return `Enter secret:\n${this.masked}`;
  },
  mask: '•'
});

const secret = await secretPrompt.prompt();

// Password input with validation
const strongPasswordPrompt = new PasswordPrompt({
  render() {
    return `Create strong password:\n${this.masked}`;
  },
  validate(value) {
    if (!value) return 'Password is required';
    if (value.length < 8) return 'Password must be at least 8 characters';
    if (!/[A-Z]/.test(value)) return 'Password must contain uppercase letter';
    if (!/[0-9]/.test(value)) return 'Password must contain a number';
  }
});

const strongPassword = await strongPasswordPrompt.prompt();