Extra

DatePickerSheet

A FormaUI date picker presented in a modal bottom sheet — Material 3's inline DatePicker hosted in a FormaBottomSheet instead of the M3 DatePickerDialog, with hoisted M3 state, confirm/dismiss button slots, and the calendar-to-text-input mode toggle.

5 variantsThemed defaults48dp target

import dev.formaui.components.datepicker.FormaDatePickerSheet

Calendar modeText-input mode (initialDisplayMode or the mode toggle)With dismiss buttonMode toggle hiddenCustom colors

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

12345678910111213val state = rememberDatePickerState()
if (open) {
    FormaDatePickerSheet(
        onDismissRequest = { open = false },
        state = state,
        confirmButton = {
            FormaButton(
                onClick = { onPicked(state.selectedDateMillis); open = false },
                enabled = state.selectedDateMillis != null,
            ) { Text("OK") }
        },
    )
}

FormaDatePickerSheet

Hosts M3's stable DatePicker in a FormaBottomSheet above an end-aligned button row. State is the caller's DatePickerState and the component wires nothing to the button slots — the confirm slot reads state.selectedDateMillis itself (so it can disable itself until a date is picked). The default colors make the picker's own container transparent so it sits directly on the sheet surface.

ParameterTypeDefaultDescription

onDismissRequestrequiredType() -> UnitDefaultrequiredDescriptioncalled when the sheet is dismissed (scrim tap, back press, or swipe down) — hide the sheet by no longer composing it. There is no separate cancel callback; treat a dismiss as closed-without-confirming.

staterequiredTypeDatePickerStateDefaultrequiredDescriptionthe hoisted Material 3 state; create it with rememberDatePickerState. Read state.selectedDateMillis (UTC epoch millis, Long?) in the confirm slot's click handler. The picker's locale is captured when the state is created (Material 3 behavior).

confirmButtonrequiredType@Composable () -> UnitDefaultrequiredDescriptionthe primary action slot (required), typically a FormaButton. The component attaches no click handling or label — the slot owns both.

modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the sheet.

dismissButtonType(@Composable () -> Unit)?DefaultnullDescriptionthe optional secondary/cancel action slot, shown before confirmButton.

showModeToggleTypeBooleanDefaulttrueDescriptionwhether the picker shows Material 3's calendar-to-text-input mode toggle.

skipPartiallyExpandedTypeBooleanDefaulttrueDescriptionwhether the sheet skips the half-expanded state and opens fully. Defaults to true — deliberately unlike FormaBottomSheet — because the half-expanded state clips the calendar grid.

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

colorsTypeDatePickerColors?DefaultnullDescriptionthe DatePickerColors for the picker. When null, Material 3's defaults are used with a transparent picker container so the picker sits directly on the sheet surface (avoiding a container-on-container seam). A supplied value is passed through untouched.

Supporting API

rememberDatePickerStatefunction (Material 3): The component defines no state type of its own — callers create and own the picker state via Material 3's rememberDatePickerState (initial date, selectableDates, yearRange, initialDisplayMode, saveability) and read selectedDateMillis from it.

Accessibility

Inherits Material 3's DatePicker semantics — day cells expose full-date content descriptions, the mode toggle has its own content description, and navigation controls are labeled — plus ModalBottomSheet's back-press and scrim dismiss handling; the button slots are caller-supplied (typically FormaButtons with M3's 48dp minimum touch target).

PreviousChip Next DateRangePickerSheet