React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CTA Center FormLayout Grid List
Basic Usage General Guidelines List Alignment Auto Width API ListItem Media Toolbar
CSS Helpers
Readme

# 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

<List> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> </List>

    <List>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem></List>

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

<List align="end"> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> </List>

    <List align="end">  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem></List>

## 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

<List align="end" autoWidth> <ListItem> <Placeholder bordered>List item</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item that is longer</Placeholder> </ListItem> <ListItem> <Placeholder bordered>List item that is even a bit longer</Placeholder> </ListItem> </List>

    <List align="end" autoWidth>  <ListItem>    <Placeholder bordered>List item</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item that is longer</Placeholder>  </ListItem>  <ListItem>    <Placeholder bordered>List item that is even a bit longer</Placeholder>  </ListItem></List>

## API

align
'start' │ 'end'
'start'
autoWidth
bool
false
children
node
null

## ListItem

A wrapper for individual list items.

children
node
null

Next: Media →