Glowup
DATA DISPLAY · 50 / 89
ListItem
ListItem — a Material You data display component for React Native and web.
packages/ui/src/components/List/ListItem.tsx
Live demo
360
720
Full
List item label
Properties
1 control
Label
Usage
ListItem.tsx
<
ListItem
>
List
item label </
ListItem
>
Variants
The states and shapes this component is meant to be used in.
Settings list
Workspace members
3 members, 1 pending invite
Privacy and security
Passkeys and two-factor
Email notifications
Weekly digest
Slots
leading only
trailing only
secondary only
the second line sits under the primary one
leading + secondary + trailing
all three slots filled
With avatars
AL
Ada Lovelace
Engineering lead
Owner
GH
Grace Hopper
Platform architect
Owner
KJ
Katherine Johnson
Data science
Owner
Custom surface
Milan — Hub 01
1.240 parcels
Turin — Hub 02
860 parcels
Genoa — Hub 03
312 parcels
Text only
No slots at all: the original single-line centred tile is still what you get.
Q1 revenue report
Warehouse capacity plan
Supplier contract renewal
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
7 on ListItemProps
children
required
React.ReactNode
itemContainerStyle
object
itemTextStyle
object
leading
React.ReactNode
Leading slot — an Avatar, an icon, a Checkbox.
onPress
() => void
secondary
React.ReactNode
Second line below `children`.
trailing
React.ReactNode
Trailing slot — a value, a Toggle, a chevron.
Previous
Table
Next
ListSection