Ink Enhanced Select Input: A Flexible Horizontal & Vertical CLI Selector

When developing command-line interfaces (CLIs) using React and Ink, an essential component is often a menu or select feature. Although Ink’s ecosystem offers several excellent components out of the box, such as ink-select-input, I noticed a significant missing feature: genuine support for a horizontal orientation. For games and other visually intricate terminal applications, a horizontal list of options can conserve crucial vertical space and provide a more intuitive user experience.

The Need for a Horizontal Select Input

During the development of my text-based RPG, Potion Wars, managing screen space emerged as a significant challenge. The game extensively utilizes menus and selectors for user input, which can quickly dominate the vertical space when arranged in lists. By transitioning to a horizontal layout, I was able to align the menus side-by-side, thereby preserving vertical space and enhancing the UI’s overall appearance and functionality.

I dug into the existing solutions and discovered an older issue in the ink-select-input repository calling for horizontal orientation support. Another developer, H3RSKO, created a fork called ink-select-input-horizontal, but my testing revealed limitations and a few lingering bugs that made it less than ideal for my needs.

Introducing Ink Enhanced Select Input

To address these issues, I decided to build my own component: ink-enhanced-select-input. This component extends the original idea of ink-select-input but adds native support for an orientation prop. With this prop, you can easily switch between a vertical list (the classic style) and a horizontal layout, opening the door to more creative CLI interfaces.

In addition, I’ve added various features and properties over time, as required by Potion Wars’ evolving mechanics:

• Orientation Prop: Choose between vertical or horizontal for your layout.
• Custom Indicators & Items: Easily supply your own components, from fancy glyphs to color-coded labels.
• Hotkey Support: Assign single-character hotkeys for lightning-fast selection.
• Disabled Items: Exclude certain options from being selected without removing them entirely.
• Limit Displayed Items: Show only a subset of choices at a time, useful for large lists.
• Callbacks for onHighlight & onSelect: Hook into state changes to run custom logic.

By creating this component in tandem with my game, I had the opportunity to test it in a real-world setting. This ensured that it not only functioned as intended but also felt intuitive and robust.

Current State & Roadmap

Ink Enhanced Select Input is now published on NPM and available for anyone to integrate into their Ink-based CLIs. It works well, but I’m not stopping there. Here are a few things I’d love to explore in the future:

• Scrolling / Pagination Support: For large item sets, provide a built-in way to paginate or scroll through items.
• Search / Filtering Integration: Allow users to quickly find the right option via an integrated search field or type-ahead filtering.
• Extensive Theming Options: More hooks for styling, colors, and layouts, making it easier to adapt to various branding or thematic styles.

Installation Guide

Getting started with Ink Enhanced Select Input is simple and can be done using your preferred package manager.

# npm
npm install ink-enhanced-select-input

# yarn
yarn add ink-enhanced-select-input

# pnpm
pnpm add ink-enhanced-select-input

Feedback & Contributions Welcome

This project exists because of the challenges I faced and the feedback I gathered from existing solutions. Now that it’s open-source, I’d love to hear from other developers using Ink. Whether you’re building a game, a tool, or a productivity CLI, your feedback can guide future improvements.

You can find the repository here: https://github.com/gfargo/ink-enhanced-select-input.

Feel free to open issues, suggest enhancements, or submit pull requests. Together, we can make the Ink ecosystem even richer and more versatile for terminal-based UIs.

---

Thanks for reading! If you’re working on something similar or have ideas on how to push this component further, I’m all ears. Let’s keep building better CLI experiences, one component at a time.