List

Scrollable list panel for pickers, menus, and custom overlays. Compose rows with catnip-list-item; optional catnip-divider between rows for visual grouping.

Overview

catnip-list is a presentational primitive: it does not own selection state or an items prop. The parent loops catnip-list-item children (or places them statically), binds selected, active, disabled, and intent, and handles click on each row.

Set selection-appearance once on the list so every row uses the same selection chrome (default stroke, checkmark, or checkbox).

Piece	Role
catnip-list	Panel chrome, scrollable body, header / footer slots
catnip-list-item	One interactive row (leading, default, trailing slots)
catnip-divider	Optional visual separator between direct children of the list

catnip-dropdown still uses an internal list implementation for its option panel; you do not need catnip-list inside a dropdown unless you are building a custom overlay.

Live example

Accessibility

• Set role on the list: listbox for pickers (rows use option), menu for action menus (rows use menuitem).
• Provide aria-label or aria-labelledby on the list when there is no visible title.
• For listbox roving focus / aria-activedescendant, set id on the active row and active on catnip-list-item; keyboard logic stays in the parent (see Dropdown for a reference implementation).
• Use catnip-divider with default decorative so separators do not affect option counts.