Skip to content

Component

ListItem

A FormaUI list item — a single row for lists, menus, and settings, delegating to Material 3's ListItem.

dev.formaui.components.listitem

Single-lineTwo-lineThree-lineClickable

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

Column {
    FormaListItem(
        headline = "Single line",
        trailing = { Text("›") },
        onClick = {},
    )
    FormaDivider()
    FormaListItem(
        headline = "Ada Lovelace",
        supporting = "ada@example.com",
        leading = { FormaAvatar(initials = "AL", size = FormaAvatarSize.Small) },
        onClick = {},
    )
}

FormaListItem

List row whose single-/two-/three-line layout is derived automatically from which of headline/overline/supporting are supplied, with optional leading/trailing slots and click handling.

headlinerequiredTypeStringDefaultrequiredDescriptionthe primary text of the row.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the row.
overlineTypeString?DefaultnullDescriptionoptional label shown above headline.
supportingTypeString?DefaultnullDescriptionoptional secondary text shown below headline.
leadingType@Composable (() -> Unit)?DefaultnullDescriptionoptional slot at the start of the row.
trailingType@Composable (() -> Unit)?DefaultnullDescriptionoptional slot at the end of the row.
onClickType(() -> Unit)?DefaultnullDescriptionoptional click handler; when non-null the whole row becomes clickable.
enabledTypeBooleanDefaulttrueDescriptionwhether the row responds to clicks. Only meaningful when onClick is non-null.
colorsTypeListItemColors?DefaultnullDescriptionthe row colors (defaults to the M3 defaults, themed by FormaTheme).
headlineTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for headline, merged on top of the M3 headline style so a partial override (e.g. only fontWeight) keeps the M3 defaults for everything else.
overlineTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for overline, merged on top of the M3 overline style.
supportingTextStyleTypeTextStyle?DefaultnullDescriptionoptional TextStyle override for supporting, merged on top of the M3 supporting style.

Accessibility

Passing onClick makes the whole row a single clickable/focusable target with Role.Button semantics; M3 list items already meet the 48dp minimum height.