Switch

View sourcecomponents/switch.go

Controlled switch#

Toggle a setting without hidden component-owned state.

Enable JavaScript to run the preview. Go source and install commands remain available.

notify := f.Switch(tree.ID(page, "notifications"), enabled).Label("Desktop notifications")
if notify.Clicked() {
    enabled = !enabled
}

Two sizes#

Compare the default and compact switch geometry.

Enable JavaScript to run the preview. Go source and install commands remain available.

f.Row().Gap(12).Children(func() {
    if f.Switch(tree.ID(page, "default"), normal).Label("Default size").Clicked() {
        normal = !normal
    }
    if f.Switch(tree.ID(page, "small"), compact).Label("Compact size").Small().Clicked() {
        compact = !compact
    }
})

Disabled states#

Disabled switches stay visible but do not change state.

Enable JavaScript to run the preview. Go source and install commands remain available.

if f.Switch(tree.ID(page, "notify"), notify).Label("Desktop notifications").Clicked() {
    notify = !notify
}
f.Switch(tree.ID(page, "off"), false).Label("Disabled · Off").Disabled(true)
f.Switch(tree.ID(page, "on"), true).Label("Disabled · On").Disabled(true)

Installation

Copy the recipe into your own project.

go run ./cmd/viva add --out ./components/local switch

An explicit on/off setting#

BeginSwitch takes the application-owned checked value. Label names the control; Small changes its compact geometry without creating a different state model.

Use switches for settings that take effect immediately, not confirmation actions.
Disabled switches remain visible but do not change state.
Browser previews show the final state; native transition timing must be checked in the native preview.

Keyboard & state#

Tab reaches an enabled switch. Enter and Space toggle the setting through the click handler. Theme colors come from typed tokens.

Keyboard

Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.