Toggle

Three related controls, all pressed-state buttons: toggle is the standalone form whose label is the element's content, toggle-button is the chip form for grouped use, and toggle-group is a row container that groups toggle-buttons into one segmented strip. All of them dispatch on-toggle; the model owns the state and renders it back through checked (standalone toggles) or selected (usually a {a == b} equality inside a group). For a sliding on/off control use switch — a toggle is a button that stays pressed, not a switch.

A toggle group rendered by the engine (dark theme) — toggle-buttons in a toggle-group; the model drives selected

Markup

<toggle-group>
  <toggle-button selected="{align == left}" on-toggle="align_left">Left</toggle-button>
  <toggle-button selected="{align == center}" on-toggle="align_center">Center</toggle-button>
  <toggle-button selected="{align == right}" on-toggle="align_right">Right</toggle-button>
</toggle-group>

Zig builder

ui.el(.toggle_group, .{}, .{
    ui.el(.toggle_button, .{ .text = "Left", .selected = model.align == .left, .on_toggle = .align_left }, .{}),
    ui.el(.toggle_button, .{ .text = "Center", .selected = model.align == .center, .on_toggle = .align_center }, .{}),
    ui.el(.toggle_button, .{ .text = "Right", .selected = model.align == .right, .on_toggle = .align_right }, .{}),
})

Toggle

The standalone toggle element carries its own label; bind checked and handle on-toggle exactly like a checkbox.

Toggles rendered by the engine (dark theme) — on, off, and disabled toggles

<row gap="12" cross="center">
  <toggle checked="{bold}" on-toggle="toggle_bold">Bold</toggle>
  <toggle checked="{italic}" on-toggle="toggle_italic">Italic</toggle>
  <toggle disabled="true" on-toggle="toggle_underline">Underline</toggle>
</row>

ui.row(.{ .gap = 12, .cross = .center }, .{
    ui.el(.toggle, .{ .text = "Bold", .checked = model.bold, .on_toggle = .toggle_bold }, .{}),
    ui.el(.toggle, .{ .text = "Italic", .checked = model.italic, .on_toggle = .toggle_italic }, .{}),
    ui.el(.toggle, .{ .text = "Underline", .disabled = true, .on_toggle = .toggle_underline }, .{}),
})

Attributes

Attribute	Description
`text`	Text value for text-bearing elements; a literal or one {binding}.
`checked`	Checked state for checkbox/toggle; true/false or a {binding}.
`selected`	Selected state; often a {a == b} equality.
`disabled`	Disables the control; true/false or a {binding}.
`on-toggle`	Dispatch a Msg on toggle: tag or tag:{payload}. Hit-target elements only (checkbox, toggle, toggle-button, switch, accordion, ...).