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.

2 variantsThemed defaults

import dev.formaui.components.search.FormaSearchBar

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

KOTLIN

1234567891011121314var 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.

ParameterTypeDefaultDescription

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.

PreviousRangeSlider Next SegmentedButton