Skip to main content

Interactive List

Create an interactive list widget with keyboard and mouse support.

Code​

import { Screen, List, Box } from '@unblessed/node';

const screen = new Screen({ smartCSR: true });

const list = new List({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  label: ' {bold}{cyan-fg}Menu{/cyan-fg}{/bold} ',
  tags: true,
  keys: true,    // Enable keyboard navigation
  vi: true,      // Enable vi-style keys (j/k)
  mouse: true,   // Enable mouse selection
  border: {
    type: 'line'
  },
  style: {
    fg: 'white',
    border: { fg: 'cyan' },
    selected: {
      bg: 'cyan',
      fg: 'black'
    }
  },
  items: [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5'
  ]
});

const statusBox = new Box({
  parent: screen,
  top: 3,
  left: 'center',
  width: '50%',
  height: 3,
  content: 'Select an item with arrow keys or mouse',
  tags: true,
  style: {
    fg: 'yellow'
  }
});

list.on('select', (item, index) => {
  statusBox.setContent(`{bold}Selected:{/bold} ${item.getText()} (index: ${index})`);
  screen.render();
});

list.focus();
screen.key(['q', 'C-c'], () => process.exit(0));
screen.render();

Try it Live​

Visit the Home Page and select "Interactive List" from the examples to try this!

Key Features​

Input Handling​

  • keys: true - Arrow key navigation
  • vi: true - Vi-style j/k navigation
  • mouse: true - Click to select

Events​

  • select event - Fires when item is selected
  • Returns selected item and index

Styling Selected Items​

style: {
  selected: {
    bg: 'cyan',
    fg: 'black'
  }
}

Next Steps​