Toggle Group

Form

A set of interconnected toggle buttons with shared border radius.

Preview

Usage

toggle-group.rs

use floe_ui::components::toggle_group::{self, ItemPosition};
use iced::widget::text;

let group = toggle_group::group([
    toggle_group::item(
        text("Bold").size(14),
        self.active == 0,
        ItemPosition::First,
        Message::SetFormat(0),
        &tokens,
    ),
    toggle_group::item(
        text("Italic").size(14),
        self.active == 1,
        ItemPosition::Middle,
        Message::SetFormat(1),
        &tokens,
    ),
    toggle_group::item(
        text("Underline").size(14),
        self.active == 2,
        ItemPosition::Last,
        Message::SetFormat(2),
        &tokens,
    ),
]);

API Reference

Props / Parameters

Name	Type	Default	Description
content	impl Into<Element>	—	Item content (usually text)
is_active	bool	—	Whether this item is selected
position	ItemPosition	—	Position: First, Middle, Last, Single
on_press	Message	—	Message sent when clicked
tokens	&DesignTokens	—	Design tokens for theming

Style Functions

item_active_style(position, tokens)

item_inactive_style(position, tokens)

Style functions return closures compatible with Iced's .style() method.

Builder Functions

group(items)

item(content, is_active, position, on_press, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/toggle_group.rs