XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

List Box

Previous: LabelNext: Loader

An always-visible list of options to select one or several from.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  ListBox,3  ListBoxGroup,4  ListBoxItem,5  ListBoxLabel,6  ListBoxSeparator7} from "xiod-ui/list-box";

Anatomy

1<ListBoxItem />2<ListBox>3  <ListBoxGroup>4    <ListBoxLabel />5    <ListBoxItem />6  </ListBoxGroup>7</ListBox>

API Reference

Detailed documentation of properties and options.

ListBox

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
defaultValue
ListBoxValue|null
–

The value selected at first, when the selection isn't controlled.

deselectable
LabelLoader
boolean
false

Whether a single-choice list lets the user clear the selection by choosing the selected option again.

disabled
boolean
false

Whether the whole list is disabled.

multiple
boolean
false

Whether more than one item can be selected. The value is then an array. Shift selects a range, and Ctrl or ⌘ + A selects every option.

name
string
–

Submits the selection with a form: one hidden input per selected value.

onHighlightChange
((value: string) => void)
–

Called with the value of the option the keyboard or pointer moves to, or undefined when the list loses focus.

onValueChange
((value: ListBoxValue | null) => void)
–

Called with the new value when the selection changes: a string (or null), or an array when multiple is set.

value
ListBoxValue|null
–

The selected value: a string, or an array of strings when multiple is set. null selects nothing. Use with onValueChange to control the selection.

ListBoxGroup

Accepts render, plus every native <div> attribute.

ListBoxItem

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
valueReq
string
–

The value this item selects. Must be unique within the list.

disabled
boolean
–

Whether the item can't be selected or highlighted.

indicator
ReactNode
–

Replaces the check shown on a selected item. Pass null to show none.

textValue
string
–

The text typeahead matches, when the item's content isn't plain text.

ListBoxLabel

Accepts render, plus every native <div> attribute.

ListBoxSeparator

Accepts render, plus every native <div> attribute.