gsxui

Switch

Basic

// Package switchctl holds the site's example gsx components for ui.Switch
// ("switch" is a Go keyword, so this package keeps its legacy name).
package switchctl

import (
	"github.com/gsxhq/gsxui/ui"
)

// Basic pairs an unchecked and a checked Switch, each with a Label.
component Basic() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-airplane"/>
			<ui.Label for="switch-basic-airplane">Airplane mode</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-basic-wifi" checked/>
			<ui.Label for="switch-basic-wifi">Wi-Fi</ui.Label>
		</div>
	</div>
}

States

package switchctl

import (
	"github.com/gsxhq/gsxui/ui"
)

// States adds disabled variants — disabled is a bare boolean attribute
// forwarded through Switch's { attrs... } spread onto the native
// checkbox+role=switch input.
component States() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-states-off-disabled" disabled/>
			<ui.Label for="switch-states-off-disabled">Off, disabled</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Switch id="switch-states-on-disabled" checked disabled/>
			<ui.Label for="switch-states-on-disabled">On, disabled</ui.Label>
		</div>
	</div>
}