Skip to main content

​
Overview

Quick search input field.

​
Import

import { SearchBox } from 'nikcli-tui';

​
Usage

new SearchBox({ parent: screen, label: 'Search' });

​
Live Preview

​
Run Locally

npm run tsx:core-gallery

​
Props

  • placeholder?: string — Placeholder text.
  • onChange?: (value: string) => void — Typing callback.
  • onSearch?: (value: string) => void — Enter/submit callback.
  • value?: string — Controlled value.
  • clearable?: boolean — Shows a clear button (default true).
  • searchIcon?: string — Optional leading icon (default ’🔍’).
  • width?: string | number — Container width (default 100%).
  • height?: number — Container height (default 3).

​
Methods

  • getValue(), setValue(value), clear().
  • setPlaceholder(text), focus(), blur().
  • setSearchIcon(icon), setClearable(bool).
  • search(): trigger onSearch with current value.
  • getDimensions(), setDimensions(w, h).

​
Keyboard

  • Enter: triggers onSearch if provided.

​
Installation

npm i nikcli-tui

​
Import

import { SearchBox } from 'nikcli-tui';

​
Quick Start

new SearchBox({ parent: screen, top: 1, left: 2, width: 40, onSearch: v => console.log('search:', v) });

​
Production Examples

const sb = new SearchBox({ parent: screen, top: 1, left: 2, width: 50, value: 'init', onChange: v => console.log(v) });
sb.setValue('hello');

​
Best Practices

  • Debounce lato app le ricerche per ridurre chiamate superflue.