MUI List - Example & Tutorial

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Basic List

Lists are a continuous group of text or images.

---

---

Nested List

---

---

Dense List

Use dense prop with <List> component for dense list.

• Inbox
• Draft

---

• Snoozed
• Spam

---

List with Secondary Text

Use secondary prop with <ListItemText> component for secondary text.

• 
  Caroline Black

  Sweet dessert brownie.
• 
  Alfred Copeland

  Pudding pie tiramisu.
• 
  Celia Schneider

  Muffin pie chupa chups.

---

Selected List Item

Manage selected prop with the help of a state.

• 

  Caroline Black
• 

  Alfred Copeland
• 

  Celia Schneider

---

List with Checkbox

• 

  Caroline Black
• 

  Alfred Copeland
• 

  Celia Schneider

---

List with Switch

• Settings
• Wi-Fi
• Bluetooth
• Location
• Airplane Mode
• Hotspot
• Do not disturb

---

Sticky Subheader

<ListSubheader> is by default sticky.

• • I'm sticky 1
  • Item 1
  • Item 2
  • Item 3
• • I'm sticky 2
  • Item 1
  • Item 2
  • Item 3
• • I'm sticky 3
  • Item 1
  • Item 2
  • Item 3
• • I'm sticky 4
  • Item 1
  • Item 2
  • Item 3
• • I'm sticky 5
  • Item 1
  • Item 2
  • Item 3

---

Users List

• 
  Caroline Black

  Online

  13 minutes ago
• 
  Alfred Copeland

  Away

  11 minutes ago
• 
  Celia Schneider

  Offline

  9 minutes ago
• 
  Max Rogan

  In Meeting

  28 minutes ago

---

Progress List

• React is a JavaScript library for building user interfaces
• Bootstrap is an open source toolkit
• Vue.js is the Progressive JavaScript Framework
• Angular implements Functional Programming concepts
• JavaScript is the programming language of the Web

---