# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-list.svg)](https://www.npmjs.com/package/@material/mwc-list) > IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release. Lists are continuous, vertical indexes of text or images. [Material Design Guidelines: lists](https://material.io/design/components/lists.html) [Demo](https://material-components.github.io/material-web/demos/list/) ## Installation ```sh npm install @material/mwc-list ``` > NOTE: The Material Web Components are distributed as ES2017 JavaScript > Modules, and use the Custom Elements API. They are compatible with all modern > browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional > tooling step is required to resolve *bare module specifiers*, as well as > transpilation and polyfills for IE11. See > [here](https://github.com/material-components/material-components-web-components#quick-start) > for detailed instructions. ## Example usage ### Basic ```html Item 0 Item 1 Item 2 Item 3 ``` ### Activatable ```html Item 0 Item 1 Item 2 Item 3 ``` ### Multi-selectable (activatable) ```html Item 0 Item 1 Item 2 Item 3 ``` ### Leading Graphic _Note_: it is not recommended to mix graphic sizes in the same list. ```html Avatar graphic folder Icon graphic folder medium graphic folder large graphic folder ``` ### Meta Icon ```html Location A info Location B info Location C info Location D info ``` ### Two-Line ```html Item 0 Secondary line Item 1 Secondary line Item 2 Secondary line Item 3 Secondary line ``` ### Dividers Dividers must have the `divider` attribute and it is recommended to add `role="separator"` for screen readers. There are 3 variants of dividers, full-width (default), padded (respects list padding), and inset (left-padding respects avatar and icon paddding). These variants can be mixed. ```html Item 0
  • Item 1
  • Item 2
  • Item 3
  • avatar item folder
  • avatar item folder     ``` ### Checklist `mwc-check-list-item` inherits from `mwc-list-item`, so it will share a similar API to `mwc-list-item`. ```html Item 0 Item 1
  • Item 2 (left) Item 3 (left)     ``` ### Radio List `mwc-radio-list-item` inherits from `mwc-list-item`, so it will share a similar API to `mwc-list-item`. Setting `group` on the `radio-list-item` will group those `mwc-radio`s together across the same Document. ```html Item 0 Item 1
  • Item 2 (left) Item 3 (left)     ``` ### Multi Radio List A radio list can also have `multi`. ```html Item 0 Item 1
  • Item 2 Item 3     ``` ### Item Noninteractive Setting a list-item to non-interactive will disable focus and pointer events on the item, and it will no longer be considered for selection. ```html User Name user@domain.tld tag_faces
  • FAQ help_outline Sign out exit_to_app     ``` ### Styled ```html Item 0 Item 1 Item 2 Item 3 ``` ### Styled No-ripple For more-control on styling, you may want to disable the ripple. Internally `list-item` uses `mwc-ripple`. You can make the ripple invisible using its custom properties detailed in [`mwc-ripple`'s documentation](https://github.com/material-components/material-web/tree/master/packages/list). In this case, it may be simple to just set `--mdc-ripple-color` to `transparent`. ```html Item 0 Item 1 Item 2 Item 3 ``` ## API ### Slots #### mwc-list | Name | Description | ----------------- | ------------- | _default_ | Content to display in the lists internal `