Toggle Group

A set of toggle buttons where one or more can be pressed at a time.

Alignment (single)

Formatting (multiple)

Installation

biji-ui = { version = "0.5.0", features = ["toggle_group"] }

Usage

use leptos::prelude::*;
use biji_ui::components::toggle_group::{self, ToggleGroupType};

#[component]
pub fn MyToggleGroup() -> impl IntoView {
    view! {
        <toggle_group::Root
            group_type={ToggleGroupType::Single}
            class="inline-flex rounded-md border border-border"
        >
            <toggle_group::Item value="left" class="px-3 py-2 text-sm data-[state=on]:bg-accent">
                "Left"
            </toggle_group::Item>
            <toggle_group::Item value="center" class="px-3 py-2 text-sm data-[state=on]:bg-accent">
                "Center"
            </toggle_group::Item>
            <toggle_group::Item value="right" class="px-3 py-2 text-sm data-[state=on]:bg-accent">
                "Right"
            </toggle_group::Item>
        </toggle_group::Root>
    }
}

RootWith

Use <RootWith> when you need direct access to ToggleGroupState inside the children. The let:tg binding exposes tg.value as a reactive signal for reading the current selection without callbacks.

Alignment (single)

Selected: center

Formatting (multiple)

Active: bold

use leptos::prelude::*;
use biji_ui::components::toggle_group::{self, ToggleGroupType};

#[component]
pub fn AlignmentPicker() -> impl IntoView {
    let item_class = "px-3 py-2 text-sm font-medium transition-colors \
        first:rounded-l-md last:rounded-r-md border-r border-border last:border-r-0 \
        data-[state=on]:bg-accent data-[state=on]:text-accent-foreground";

    view! {
        <toggle_group::RootWith
            group_type={ToggleGroupType::Single}
            default_value="center"
            class="inline-flex rounded-md border border-border"
            let:tg
        >
            <toggle_group::Item value="left" class={item_class}>"Left"</toggle_group::Item>
            <toggle_group::Item value="center" class={item_class}>"Center"</toggle_group::Item>
            <toggle_group::Item value="right" class={item_class}>"Right"</toggle_group::Item>
            <p class="text-xs text-muted-foreground w-full text-center mt-2">
                "Selected: " {move || tg.value.with(|v| v.first().cloned().unwrap_or_default())}
            </p>
        </toggle_group::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
group_type	ToggleGroupType	Single	Whether one or multiple items can be pressed at a time.
value	Option<String>	None	Initial pressed value for Single mode.
values	Option<Vec<String>>	None	Initial pressed values for Multiple mode.
disabled	bool	false	When true, all items are disabled.

Item

Name	Type	Default	Description
value	String		The value associated with this item.
class	String	""	CSS class applied to the button element.
disabled	bool	false	When true, this item cannot be toggled.

ToggleGroupType

Name	Type	Default	Description
Single	ToggleGroupType	default	At most one item can be pressed; pressing the active item deselects it.
Multiple	ToggleGroupType		Any number of items can be pressed simultaneously.

Data Attributes

Attribute	Description
data-state	"on" when the item is pressed, "off" otherwise. Present on Item.
data-disabled	Present on Item when the item or the Root is disabled.

Keyboard Navigation

Key	Description
`ArrowRight / ArrowDown`	Moves focus to the next item (wraps).
`ArrowLeft / ArrowUp`	Moves focus to the previous item (wraps).
`Home`	Moves focus to the first item.
`End`	Moves focus to the last item.
`Enter / Space`	Toggles the focused item.