Toggle

The pressed-state button, and groups with single or multiple selection.

Toggle stays filled while On; clicking flips it. ToggleGroup coordinates a row — radio semantics by default (Sel), independent bools with Multiple.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add toggle

Usage

open demo ↗

var bold lotusui.Toggle
bold.Layout(th, gtx, lotusui.ToggleProps{Icon: lotusui.IconTextBold})
if bold.On { /* … */ }

ToggleGroup — single

open demo ↗

format := lotusui.ToggleGroup{Options: []lotusui.ToggleOption{
	// Icon-only options MUST carry a Value — an empty Label has none.
	{Value: "bold", Icon: lotusui.IconTextBold},
	{Value: "italic", Icon: lotusui.IconTextItalic},
	{Value: "underline", Icon: lotusui.IconTextUnderline},
}}
format.Layout(th, gtx, lotusui.SizeMD)
active := format.Value() // "italic"

ToggleGroup — multiple

open demo ↗

marks := lotusui.ToggleGroup{Multiple: true, Options: []lotusui.ToggleOption{
	{Label: "Bold", Value: "bold", Icon: lotusui.IconTextBold},
	{Label: "Italic", Value: "italic", Icon: lotusui.IconTextItalic},
}}
marks.SetValues(stored)
stored = marks.Values() // in Options order

Sizes

open demo ↗

small.Layout(th, gtx, lotusui.ToggleProps{Label: "Small", Outline: true, Size: lotusui.SizeSM})

Disabled

open demo ↗

t.Layout(th, gtx, lotusui.ToggleProps{Label: "Disabled", Disabled: true})

Group outline

open demo ↗

var g = lotusui.ToggleGroup{Sel: 0, Outline: true}

Group sizes

The size is the Layout parameter — the whole group moves together.

open demo ↗

g.Layout(th, gtx, lotusui.SizeSM, items...)

Group disabled

open demo ↗

var g = lotusui.ToggleGroup{Multiple: true, Disabled: true}

Group vertical

open demo ↗

var g = lotusui.ToggleGroup{Multiple: true, Vertical: true, Spacing: 1}

Group spacing

Spacing overrides the 2dp gap between items.

open demo ↗

var g = lotusui.ToggleGroup{Sel: 0, Outline: true, Spacing: 8}

Font weight selector

Content replaces Icon/Label with arbitrary content inside the item's chrome — composed here with a Field.

open demo ↗

lotusui.ToggleOption{Value: "bold", Content: weightCell("Aa", "Bold", font.Bold)}

API

Option	Type	Description
`On`	`bool`	The pressed state — yours; clicking flips it.
`Icon / Label`	`string`	One or both.
`Content`	`layout.Widget`	Replaces Icon/Label with arbitrary content in the chrome.
`Size`	`Size`	The shared size presets.
`Outline`	`bool`	Bordered while off.
`Disabled`	`bool`	Dimmed, unclickable.
`ToggleGroup.Options`	`[]ToggleOption`	The choices: Label, Value, Icon, Content. ToggleOpts("a","b") builds label-only lists (the longer name: ToggleProps is this component's per-call options struct).
`ToggleGroup.Value() / SetValue(v)`	`string`	Single-select choice; unknown values clear.
`ToggleGroup.Values() / SetValues(vs)`	`[]string`	Multi-select choices, in Options order; unknown values ignored.
`ToggleGroup.Multiple`	`bool`	Independent choices instead of radio semantics.
`ToggleGroup.Outline / Disabled`	`bool`	Group-wide chrome and state.
`ToggleGroup.Vertical / Spacing`	`bool / unit.Dp`	Stacked axis; gap override (default 2dp).