WinListBox

A classic Win2k list box with selectable items. Sunken border, white background, click-to-select with navy highlight.

When to use

Use WinListBox for displaying a list of items where the user can select one option. Good for file lists, option pickers, and selection menus.

When not to use

Do not use WinListBox for navigation. Use the sidebar instead. For multi-select, consider adding checkboxes to each item.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinListBox } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Default with items

Documents

Pictures

Music

Videos

Downloads

With scroll

report_q1_2000.doc

report_q2_2000.doc

report_q3_2000.doc

report_q4_2000.doc

budget_2001.xls

presentation.ppt

notes.txt

readme.md

config.ini

backup.zip

Props

All available props for the WinListBox component.

Prop	Type	Default	Description
`items`	`string[]`	`—`	Array of string items to display.
`defaultSelected`	`number`	`—`	Index of the initially selected item.
`onChange`	`(index: number, value: string) => void`	`—`	Callback when selection changes.
`className`	`string`	`''`	Additional CSS classes. Use max-h to control height.

Usage

Example showing the component in a typical context:

import { WinListBox } from 'win2k-ui'

export function Example() {
  return (
    <WinListBox
      items={["Option 1", "Option 2", "Option 3"]}
    />
  )
}

Notes

WinListBox uses a client component with internal selection state. Selected items display with navy background and white bold text, matching the Win2k list box highlight pattern. The container has a default min-height of 80px with scrollable overflow.