gsxui

Label

Basic

// Package label holds the site's example gsx components for ui/label.
package label

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

// Basic pairs a Label with an Input via matching for/id.
component Basic() {
	<div class="flex max-w-sm flex-col gap-2">
		<ui.Label for="label-basic-email">Email</ui.Label>
		<ui.Input id="label-basic-email" type="email" placeholder="[email protected]"/>
	</div>
}

Disabled peer

package label

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

// Disabled shows Label's peer-disabled styling: Checkbox's base class
// carries "peer", so a disabled sibling Checkbox dims and cursor-blocks its
// Label automatically — no state plumbing needed on Label itself.
component Disabled() {
	<div class="flex items-center gap-2">
		<ui.Checkbox id="label-disabled-terms" disabled/>
		<ui.Label for="label-disabled-terms">Accept terms (disabled)</ui.Label>
	</div>
}