Skip to content

Component

Chip

A FormaUI chip — "Material 3 with better defaults" — one entry point covering all four Material 3 chip types via variant, with a default-on press-scale micro-interaction (shared Modifier.formaPressScale).

dev.formaui.components.chip

assistfilterinputsuggestion

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 selected by remember { mutableStateOf(false) }
FormaChip(
    label = "Filter",
    onClick = { selected = !selected },
    variant = FormaChipVariant.Filter,
    selected = selected,
)
FormaChip(label = "Assist", onClick = { })

FormaChip

One entry point for all four Material 3 chip types; selected is honored only by the Filter and Input variants, and trailingIcon is ignored for Suggestion.

labelrequiredTypeStringDefaultrequiredDescriptionThe chip's text label.
onClickrequiredType() -> UnitDefaultrequiredDescriptionCalled when the chip is clicked. For selectable variants, toggle selected in response.
modifierTypeModifierDefaultModifierDescriptionThe Modifier applied to the chip.
variantTypeFormaChipVariantDefaultFormaChipVariant.AssistDescriptionThe chip kind (defaults to FormaChipVariant.Assist).
selectedTypeBooleanDefaultfalseDescriptionWhether the chip is selected. Only meaningful for FormaChipVariant.Filter and FormaChipVariant.Input.
enabledTypeBooleanDefaulttrueDescriptionWhether the chip is interactive.
leadingIconType@Composable (() -> Unit)?DefaultnullDescriptionOptional slot at the start of the chip (for FormaChipVariant.Suggestion this is the chip's single icon).
trailingIconType@Composable (() -> Unit)?DefaultnullDescriptionOptional slot at the end of the chip. Ignored for FormaChipVariant.Suggestion.
shapeTypeShape?DefaultnullDescriptionThe chip's container shape (defaults to FormaChipDefaults.shape).
interactionSourceTypeMutableInteractionSource?DefaultnullDescriptionThe MutableInteractionSource for observing/emitting interactions. When null, one is remembered internally.
pressedScaleTypeFloatDefaultFormaPressScaleDefaults.PressedScaleDescriptionThe scale factor applied while the chip is pressed (defaults to a subtle 0.97). Must be greater than 0.
pressAnimationSpecTypeFiniteAnimationSpec<Float>?DefaultFormaPressScaleDefaults.AnimationSpecDescriptionThe animation used for the press-scale's release spring-back (defaults to a responsive spring; the press dip uses FormaPressScaleDefaults.DownAnimationSpec). Pass null to disable the press-scale entirely.

Supporting API

FormaChipVariantenum
Kind of a FormaChip: Assist, Filter, Input, Suggestion.
FormaChipDefaultsobject
Defaults for FormaChip: shape (FormaTheme.shapes.md).

Accessibility

Chips keep Material 3's compact visual height while automatically exposing a 48dp touch target via M3's minimum interactive component size — no explicit height is forced.