Simple list

A simple list provides a list of selectable items that can be shown within a page. Each item is described by a text label. The list may be divided into logical sections by introducing group headers.

Examples

Simple list

Grouped list

Uncontrolled simple list

Props

SimpleList

*required
NameTypeDefaultDescription
aria-labelstringaria-label for the <ul> element that wraps the SimpleList items.
childrenReact.ReactNodenullContent rendered inside the SimpleList
classNamestring''Additional classes added to the SimpleList container
isControlledbooleantrueIndicates whether component is controlled by its internal state
onSelect( ref: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>, props: SimpleListItemProps ) => voidCallback when an item is selected

SimpleListGroup

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the SimpleList group
classNamestring''Additional classes added to the SimpleList <ul>
idstring''ID of SimpleList group
titleReact.ReactNode''Title of the SimpleList group
titleClassNamestring''Additional classes added to the SimpleList group title

SimpleListItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the SimpleList item
classNamestring''Additional classes added to the SimpleList <li>
component'button' | 'a''button'Component type of the SimpleList item
componentClassNamestring''Additional classes added to the SimpleList <a> or <button>
componentPropsanyAdditional props added to the SimpleList <a> or <button>
hrefstring''Default hyperlink location
isActivebooleanfalseIndicates if the link is current/highlighted
itemIdnumber | stringid for the item.
onClick(event: React.MouseEvent | React.ChangeEvent) => void() => {}OnClick callback for the SimpleList item
type'button' | 'submit' | 'reset''button'Type of button SimpleList item

CSS variables

Expand or collapse columnSelectorVariableValue
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.