List
The Nuvex UI list suite combines EList, EListItem, and EListGroup to render structured collections with selection, router links, rich item content, and nested expandable groups. Shared color, sizing, state, and keyboard behavior keep simple lists and full navigation trees on the same framework contract.
Usage
Configure a selectable EList and inspect how container props are inherited by its items. The current v-model value identifies the active row.
Selected value: inbox
Item content
Build each row with title, subtitle, icons, or avatars. The item keeps the leading and trailing regions aligned while the central content truncates safely.
Design team8 active collaborators
Visual variants
Combine outlined, inset, dense, elevation, and the shared size scale to adapt list density and surface treatment.
- DefaultDefault spacing and surface
- Outlined and insetLarge inherited size
- DenseCompact vertical rhythm
Selection and states
A scalar v-model enables single selection; an array enables multiple selection. Active, disabled, and focus states remain synchronized with the model and keyboard interaction.
Single selection
- Available
- Disabled item
Multiple selection
- Inbox
- Drafts
- Archive
Groups and nesting
Compose expandable branches with EListGroup and forward the activator attrs. Stable values produce hierarchical paths that can be controlled with v-model:group.
- List
- Tabs
- Settings
Slots and composition
Use the prepend and append slots for custom media and actions while preserving the item layout and interaction surface.
Jordan LeeProduct designer
Accessibility and keyboard
Selectable lists expose listbox semantics and roving focus. Items support arrow navigation, Home, End, Enter, and Space; grouped lists also support horizontal navigation between levels.
- Inbox12 unread messages
- Drafts3 items pending review
- ArchiveCompleted conversations
Focus an item and use Arrow Up, Arrow Down, Home, End, Enter, or Space.
API reference
Reference the public props for each component in the List suite. Events and named slots are summarized after the tables.
EList props
| Property | Type | Default |
|---|---|---|
| modelValue | ListModelProp | undefined |
Selected item value. An array enables multiple selection. | ||
| group | ListModelProp | internal state |
Controlled state for open groups. Without it, the list manages group state internally. | ||
| disabled | boolean | false |
Disables interaction for the list and all descendant items and groups. | ||
| outlined / inset / dense | boolean | false |
Controls border, inner spacing, item radius, and compact density. | ||
| size | Size | undefined |
Default size inherited by descendant items unless overridden locally. | ||
| color / activeColor | string | undefined |
Sets the base text color and the active item color. | ||
| elevation | Elevation | undefined |
Applies a framework elevation class to the list surface. | ||
EListItem props
| Property | Type | Default |
|---|---|---|
| value | string | number | route or generated id |
Identity used by the parent list selection model. | ||
| title / subtitle | string | undefined |
Primary and supporting text with automatic accessible relationships. | ||
| prependIcon / appendIcon | string | IconPath | IconPath[] | undefined |
Renders an icon in the leading or trailing item region. | ||
| prependAvatar / appendAvatar | string | undefined |
Renders an image avatar in the leading or trailing item region. | ||
| isActive / activeClass | boolean / string | undefined / "e-list-item--active" |
Overrides model-derived active state and customizes its class. | ||
| disabled | boolean | false |
Removes the item from interaction and managed keyboard focus. | ||
| ripple | boolean | undefined |
Compatibility prop for the interactive item ripple contract. | ||
| tag | string | "li" |
Overrides the root element. Passing to renders a router-link by default. | ||
| size | Size | "default" |
Overrides the size inherited from EList. | ||
| color / activeColor | string | undefined |
Overrides inherited base or active colors for this item. | ||
EListGroup props
| Property | Type | Default |
|---|---|---|
| value | string | number | generated id |
Stable group identity used to build its hierarchical path. | ||
| disabled | boolean | false |
Disables the group activator and inherits disabled state from EList. | ||
| elevation | Elevation | undefined |
Applies a framework elevation class to the group container. | ||
Events and slots
EList emits update:modelValue and update:group. EListItem emits click:item. Public slots are EList default; EListItem default, prepend, and append; and EListGroup activator and default.