List Box

A List Box shows a set of options as a list that can be selected with the mouse or the keyboard, one at a time or several at once. Unlike a select it stays open, which suits a picker built into a panel, a file list or a settings column.

Demo

Rendered live, with the same build of the library you install.

Quarterly report.pdf2.4 MB · PDF
Budget.xlsx812 KB · Spreadsheet
Archive.zip18 MB · Archive

Usage

Source
ListBox.tsx
import { useState } from 'react';
import { NListBox } from '@nayan-ui/react';


const items = [
  { id: 'report', label: 'Quarterly report.pdf', description: '2.4 MB · PDF' },
  { id: 'budget', label: 'Budget.xlsx', description: '812 KB · Spreadsheet' },
  { id: 'archive', label: 'Archive.zip', description: '18 MB · Archive', disabled: true }
];


const ListBox = () => {
  const [selected, setSelected] = useState<any>(new Set(['report']));


  return (
    <div>
      <NListBox items={items} selectionMode="multiple" selectedKeys={selected} onSelectionChange={setSelected} aria-label="Files" />
    </div>
  );
};


export default ListBox;

Attributes

11 props
NameTypeDefaultDetails
itemsNListBoxItem[]RequiredThe items prop.
selectionMode'none' | 'single' | 'multiple''single'The selectionMode prop.
selectedKeysIterable<string>OptionalThe selectedKeys prop.
onSelectionChange(keys: Selection) => voidOptionalThe onSelectionChange prop.
onAction(key: string) => voidOptionalFires on click or Enter, for a list that acts rather than selects.
variant'default' | 'danger''default'The variant prop.
disabledKeysIterable<string>OptionalKeys that cannot be chosen. Individual items can also carry `disabled`.
emptyMessageReactNode'Nothing here yet.'Shown when `items` is empty.
classNamestring''The className prop.
itemClassNamestring''The itemClassName prop.
aria-labelstring'Options'The aria-label prop.

Tags

Other components solving nearby problems.