Equipment Selector Demo

A multi-select combobox component for selecting equipment. Supports availability states, required items, and filtering.

Default State

Empty selector ready for user input. Click to open the dropdown and select equipment.

Selected: None

With Pre-selected Items

Shows how selected items appear as badges. Click the X to remove an item.

SaddleBridleGrooming Kit

With Required Items

The Saddle is required and cannot be removed. Notice it has no X button.

SaddleBridle

Required items: Saddle (cannot be removed)

With Unavailable Items

Helmet and Hoof Pick are unavailable and appear grayed out in the dropdown.

Unavailable: Helmet, Hoof Pick

Disabled State

The entire selector is disabled and cannot be interacted with.

SaddleBridle

Invalid State

Shows the error styling when validation fails.

Search Filtering

Type in the input to filter the equipment list. Try typing 'rope' or 'kit'.