HyList

A vertical list of items for display, navigation, or selection.

When to Use This Component

Use hy-list for:

• Displaying lists of items, options, or content
• Navigation menus and listboxes with selectable options
• Settings panels with multiple choices

Don't use this for:

• Action menus, value pickers, or any overlay-triggered selection → Use <hy-menu-button> with <hy-menu-item> / <hy-menu-item-radio> / <hy-menu-item-checkbox> instead.
• Simple form inputs → Use <hy-select> instead.

Size Variants

• small: Compact design with body-sm typography
• medium: Default size with body-md typography (default)
• large: Prominent design with body-lg typography

Role Behavior

The list automatically sets the appropriate role on child list-items based on its own role:

• role="listbox" → child items get role="option"
• role="menu" → child items get role="menuitem"
• role="list" → child items get role="listitem"

Examples

Basic List

<hy-list>
  <hy-list-item value="1" primary-text="Item 1"></hy-list-item>
  <hy-list-item value="2" primary-text="Item 2"></hy-list-item>
</hy-list>

Events

• selection-change - Fired when selection changes

Methods

willUpdate()

Generates unique IDs before the first render to prevent update-after-update warnings. IDs are generated client-side only to prevent SSR/client hydration mismatches.