Edit page

List

The List aligns content into an organized list.

Basic Usage

To implement the List component, you need to import it first:

import { List, ListItem } from '@react-ui-org/react-ui';

And use it:

  • List item
  • List item
  • List item

See API for all available options.

General Guidelines

  • Wrap your items into the ListItem component. This ensures your content is properly spaced and aligned with other List elements. Do not try to put any custom HTML or React components directly into the List layout without wrapping it with the ListItem first.

  • For forms, use rather the FormLayout component which is designed specifically for that purpose.

List Alignment

You can simply set the list alignment by specifying the align option.

👉 At the current stage of development, React UI is RTL aware so switching to a fully RTL-compatible behavior in the future should be painless. That's why the alignment values are called rather start than left and end instead of right.

  • List item
  • List item
  • List item

Auto Width

For cases when you prefer the list items to keep their original width and don't want them to expand over the full width of the parent of the list, there is the autoWidth option. It shrinks the list according to its longest item. However, the root div always behaves as a full-width block element (unless you put it inside a flex or grid layout).

  • List item
  • List item that is longer
  • List item that is even a bit longer

API

Prop nameTypeDefaultRequiredDescription
align'start' │ 'end''start'false

Horizontal alignment of list items.

autoWidthboolfalsefalse

If true, the list items will take up only as much horizontal space as necessary.

childrennodenullfalse

Individual ListItems.

ListItem API

A wrapper for individual list items.

Prop nameTypeDefaultRequiredDescription
childrennodenullfalse

Content of the list item.

Theming

Custom PropertyDescription
--rui-List__row-gapGap between list items