# FAB Group

<flow-fab-group>

Reactive

Stable

The FAB group component provides a expanding group of FAB buttons to provide multiple actions.

FAB groups are typically used to add user actions or options to Flo.w maps. The child FAB buttons are hidden until the FAB group master button is clicked. Child FAB buttons can act as regular action buttons or checkbox-style toggle buttons.

When using checkbox-style option buttons, the FAB group can also be bound to a Flo.w reactive state property.

# Examples

# Direction

Use the direction attribute to specify the direction to expand the FAB group when opened.

# Reactive Checkbox-Style Options

A FAB group of checkbox-style FABs can be bound to Flo.w reactive state. Set the selection-state attribute to specify the Flo.w state property to bind to the FAB group. The value of the state property is an array of values corresponding to the selected FABs and will be updated when FABs are selected or deselected.

# Properties

Property	Description	Type	Default
`direction`	Specify the direction in which to expand buttons when the FAB group is opened.	`"down" \| "left" \| "right" \| "up"`	`'up'`
`flowContext` `flow-context`	The Flo.w context ID to use for application state.	`string`	`'default'`
`icon`	The icon of the main FAB group button. The property can be the name of a built-in icon, a URL of an SVG file, or an SVG data URI.	`string`
`open`	Set this attribute to `true` to force the FAB group to open. The open state will be toggled automatically when the main FAB is clicked.	`boolean`	`false`
Reactive `selectionState` `selection-state`	Set to bind a Flo.w application state property to the group. The state property is an array of `value` attributes corresponding to checked FABs.	`string`

# Slots

Slot	Description
`(default)`	Child FABs to place in the FAB group.

← Floating Action Button (FAB) Gauge →