Component

ListItem

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

4 variantsThemed defaults48dp target

import dev.formaui.components.listitem.FormaListItem

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

KOTLIN

1234567891011121314Column {
    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.

ParameterTypeDefaultDescription

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.

PreviousLineChart Next LoadingIndicator