Toggle

An on/off switch with a visual state indicator, six color variants, an optional bordered container style, and disabled states.

Usage Example
@toggle.Toggle(toggle.Config{
    ID:      "myToggle",
    Label:   "Toggle",
    Checked: true,
})

With Container

Style: toggle.StyleContainer wraps the switch and label in a bordered container.

With Container
@toggle.Toggle(toggle.Config{
    ID:      "containerToggle",
    Label:   "Toggle",
    Style:   toggle.StyleContainer,
    Checked: true,
})

Color Variations

Set Variant: Primary, Secondary, Info, Success, Warning, or Danger.

Color Variations
@toggle.Toggle(toggle.Config{ID: "successToggle", Label: "success", Variant: toggle.Success, Checked: true})
@toggle.Toggle(toggle.Config{ID: "dangerToggle", Label: "danger", Variant: toggle.Danger, Checked: true})

Disabled States

Disabled: true blocks interaction in both the off and on positions.

Disabled States
@toggle.Toggle(toggle.Config{ID: "offToggle", Label: "Disabled (off)", Disabled: true})
@toggle.Toggle(toggle.Config{ID: "onToggle", Label: "Disabled (on)", Checked: true, Disabled: true})

API Reference

PropTypeDefaultDescription
IDstring""Unique id for the toggle input (and label's for target).
Namestring""Form field name.
Labelstring""Label text beside the switch.
CheckedboolfalseInitial on state.
DisabledboolfalseDisable interaction.
VariantVariantPrimaryColor: "primary", "secondary", "info", "success", "warning", "danger".
StyleStyleStyleDefaultLayout: "default" (inline) or "container" (bordered).
RootClassstring""Extra classes on the toggle root.