Skip to content

Extra

SearchBar

A FormaUI search bar — "Material 3 with better defaults", wrapping Material 3's SearchBar/DockedSearchBar behind one entry point whose variant switches between the docked and full-screen expansion surfaces.

dev.formaui.components.search

DockedFullScreen

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

var query by remember { mutableStateOf("") }
var expanded by remember { mutableStateOf(false) }
FormaSearchBar(
    query = query,
    onQueryChange = { query = it },
    onSearch = { expanded = false },
    expanded = expanded,
    onExpandedChange = { expanded = it },
    variant = FormaSearchBarVariant.Docked,
    placeholder = { Text("Search contacts") },
    leadingIcon = { Text("🔍") },
) {
    Text("Ada Lovelace")
}

FormaSearchBar

Search input that expands into a Docked results panel or a FullScreen overlay; query and expansion state are both hoisted.

queryrequiredTypeStringDefaultrequiredDescriptionthe current query text shown in the input field.
onQueryChangerequiredType(String) -> UnitDefaultrequiredDescriptioncalled with the updated text as the user types.
onSearchrequiredType(String) -> UnitDefaultrequiredDescriptioncalled with the current query when the input service triggers the search (IME) action.
expandedrequiredTypeBooleanDefaultrequiredDescriptionwhether the search bar is expanded and showing content.
onExpandedChangerequiredType(Boolean) -> UnitDefaultrequiredDescriptioncalled with the requested new expanded state — e.g. true when the input field gains focus, false on dismiss request or back navigation.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the search bar in its collapsed layout position.
variantTypeFormaSearchBarVariantDefaultFormaSearchBarVariant.DockedDescriptionwhich Material 3 surface to expand into (defaults to FormaSearchBarVariant.Docked).
enabledTypeBooleanDefaulttrueDescriptionwhether the input field is interactive.
placeholderType@Composable (() -> Unit)?DefaultnullDescriptionthe placeholder shown in the input field when query is empty.
leadingIconType@Composable (() -> Unit)?DefaultnullDescriptionthe input field's leading icon slot, typically a search glyph.
trailingIconType@Composable (() -> Unit)?DefaultnullDescriptionthe input field's trailing icon slot, e.g. a clear button shown when query is not empty.
shapeTypeShape?DefaultnullDescriptionthe collapsed search bar's container shape. When null, the Material 3 default for the chosen variant is used (FormaSearchBarDefaults.dockedShape or FormaSearchBarDefaults.fullScreenCollapsedShape).
colorsTypeSearchBarColors?DefaultnullDescriptionthe container/divider/input-field colors. When null, the Material 3 default colors are used.
tonalElevationTypeDpDefaultFormaSearchBarDefaults.TonalElevationDescriptionthe tonal elevation applied when colors' container color is the surface color (defaults to FormaSearchBarDefaults.TonalElevation).
shadowElevationTypeDpDefaultFormaSearchBarDefaults.ShadowElevationDescriptionthe shadow elevation below the collapsed search bar (defaults to FormaSearchBarDefaults.ShadowElevation).
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionthe MutableInteractionSource for observing/emitting interactions on the input field. When null, one is remembered internally.
contentType@Composable ColumnScope.() -> UnitDefault{}Descriptionthe search results (or suggestions) shown below the input field while expanded, laid out in a ColumnScope.

Supporting API

FormaSearchBarVariantenum
The surface the search bar expands into; values: Docked, FullScreen.
FormaSearchBarDefaultsobject
Default values: dockedShape, fullScreenCollapsedShape, TonalElevation, ShadowElevation.

Accessibility

The input field carries Material 3's text-field semantics, and expansion stays hoisted — onExpandedChange fires both when the field gains focus and on back navigation, so the caller owns the collapse. A search-glyph leadingIcon is decorative (contentDescription = null); give trailingIcon a description when it is an action such as clear.