List Item Group

The "List Item Group" component uses a non interactive heading which groups list items.

Preview

Base Style

You should use this component when you have multiple list items you would like to group into different categories.

The heading is unstyled by default. You will likely have to pass utility classes to the heading-class prop to make the heading look how you wish.

Accessibility

The List Item Group does not implement arrow-keys keyboard navigation. You will however get arrow-keys keyboard navigation when using this within list based Dialtone components such as Dropdown or Combobox.

The aria label for the List Item Group will be set by the content of the heading.

Vue API

Slots

Name	Description
default	Slot for the list component
headingSlot	Slot for heading, will override heading prop.

Props

Name	Description	Default
heading	List's heading. Type: string	''
headingClass	Additional class to style the heading Type: string\|array\|object	''
id	Id of the List Item Group Type: string	function() { return getUniqueString(); }
listClass	Additional class for the wrapper list element. Type: string\|array\|object	''

Preview

Base Style #

Accessibility #

Vue API #

Slots

Props

Base Style

Accessibility

Vue API