Toggle Group

A group of toggle buttons where selection is managed collectively.

Single selection

Only one item can be active at a time.

Multiple selection

Any combination of items can be active.

Outline variant

Toggle group with outlined items.

Sizes

Small, default, and large sizes.

Disabled

A disabled toggle group.

Usage

julia

using Suite

# Single selection
ToggleGroup(type="single", default_value="center",
    ToggleGroupItem(value="left", "Left"),
    ToggleGroupItem(value="center", "Center"),
    ToggleGroupItem(value="right", "Right"),
)

# Multiple selection
ToggleGroup(type="multiple",
    ToggleGroupItem(value="bold", "B"),
    ToggleGroupItem(value="italic", "I"),
    ToggleGroupItem(value="underline", "U"),
)

Keyboard Interactions

Key	Action
`Enter / Space`	Toggle the focused item
`Arrow Right`	Focus next item (horizontal)
`Arrow Left`	Focus previous item (horizontal)
`Arrow Down`	Focus next item (vertical)
`Arrow Up`	Focus previous item (vertical)

API Reference

ToggleGroup

Prop	Type	Default	Description
type	String	"single"	"single" or "multiple" — selection mode
default_value	String/Vector	nothing	Initially selected value(s)
variant	String	"default"	"default" or "outline"
size	String	"default"	"default", "sm", or "lg"
orientation	String	"horizontal"	"horizontal" or "vertical"
disabled	Bool	false	Disable all items
class	String	""	Additional CSS classes

ToggleGroupItem

Prop	Type	Default	Description
value	String	""	Unique identifier for this item (required)
variant	String	"default"	Override group variant
size	String	"default"	Override group size
disabled	Bool	false	Disable this specific item
children...	Any	-	Item content (text, icons)
class	String	""	Additional CSS classes