Component

BottomSheet

A FormaUI modal bottom sheet — content that slides up from the bottom over a scrim, delegating to Material 3's ModalBottomSheet.

2 variantsThemed defaults

import dev.formaui.components.bottomsheet.FormaBottomSheet

ModalModal (skipPartiallyExpanded)

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

123456789var open by remember { mutableStateOf(false) }
FormaButton(onClick = { open = true }) { Text("Show sheet") }
if (open) {
    FormaBottomSheet(onDismissRequest = { open = false }) {
        Text("Payment options", style = MaterialTheme.typography.titleMedium)
        Text("Choose how you'd like to pay.")
        FormaButton(onClick = {}, modifier = Modifier.fillMaxWidth()) { Text("Continue") }
    }
}

FormaBottomSheet

Modal bottom sheet shown while composed; the Material 3 SheetState is managed internally so callers only need FormaUI's opt-in.

ParameterTypeDefaultDescription

onDismissRequestrequiredType() -> UnitDefaultrequiredDescriptioncalled when the sheet is dismissed.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the sheet.

skipPartiallyExpandedTypeBooleanDefaultfalseDescriptionwhen true, the sheet has no half-expanded state and opens fully.

shapeTypeShape?DefaultnullDescriptionthe sheet container shape. When null, Material 3's top-rounded default is used.

containerColorTypeColorDefaultBottomSheetDefaults.ContainerColorDescriptionthe sheet's background color (defaults to the M3 bottom-sheet container, themed by FormaTheme).

contentColorTypeColorDefaultcontentColorFor(containerColor)Descriptionthe preferred content color inside the sheet (defaults to the color matching containerColor).

scrimColorTypeColorDefaultBottomSheetDefaults.ScrimColorDescriptionthe color of the scrim that obscures content behind the sheet (defaults to the M3 default scrim).

contentrequiredType@Composable ColumnScope.() -> UnitDefaultrequiredDescriptionthe sheet's content, laid out in a ColumnScope.

Accessibility

Delegates to Material 3's ModalBottomSheet, which holds focus above the scrim and routes a scrim tap, back press, or swipe-down to onDismissRequest; the default M3 drag handle (and its semantics) comes with the sheet. The sheet itself carries no title semantics — give its content a heading Text of its own.

PreviousBottomAppBar Next Button