Selection · Truvar.ai Design System

Select

Built on Select + ListBox + Popover

Type a letter to jump to an option.

Data source

Region

Combo box

Built on ComboBox

Filters as you type.

Assign to

Autocomplete

Built on Autocomplete + Menu

A command menu: focus stays in the field while arrow keys move through results. Used for the search in the header.

List box

Built on ListBox + ListBoxSection

An always-visible list with sections. Here, multiple selection.

Multi-select

Built on Select / ComboBox selectionMode="multiple"

The list stays open while you pick. Chips show what's chosen; extra choices collapse into a count.

Languages the agent speaks

Route calls to

Sales

Grid list

Built on GridList

Rows that hold buttons. Tab reaches the buttons; arrows move between rows.

NKNadia KamelNile Foods, follow up tomorrow

TSTarek SalehDelta Freight, follow up in 2 days

MFMona FathySinai Retail, follow up in 3 days

HIHany IbrahimAlex Pharma, follow up in 4 days

Grouped list

Built on GridList + GridListSection + GridListHeader

Headers stay with their group and are announced, so people know which group a row belongs to.

Qualified

MFMona FathySinai Retail

ASAhmed SamirLuxor Textiles

Proposal sent

TSTarek SalehDelta Freight

RYRana YoussefCairo Fintech

SLSherif LotfyHurghada Marine

Negotiation

NKNadia KamelNile Foods

DADina AshrafAswan Solar

Infinite list

Built on ListBox + ListBoxLoadMoreItem

The next page loads as you near the bottom. The loading row is announced, and the count updates.

20 of 120 leads loaded