Input

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

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

// Basic renders a default Input.
component Basic() {
	<ui.Input type="email" placeholder="[email protected]"/>
}

package input

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

// States renders Input in its enabled, disabled, and invalid states —
// disabled is a bare boolean attribute, aria-invalid is a plain string
// attribute; both fall through Input's { attrs... } spread untouched.
component States() {
	<div class="flex max-w-sm flex-col gap-3">
		<ui.Input placeholder="Enabled"/>
		<ui.Input placeholder="Disabled" disabled/>
		<ui.Input placeholder="Invalid" aria-invalid="true" value="not-an-email"/>
	</div>
}

package input

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

// Custom overrides Input's default height by passing class="h-12 text-base" at the
// call site. Input's own h-9 is part of the same class-merge group, so the
// caller's h-12 wins and h-9 is dropped entirely — not appended alongside
// it — rather than the two classes fighting in the cascade.
component Custom() {
	<ui.Input class="h-12 text-base" placeholder="Larger input"/>
}

package input

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

// FormRow composes Label, Input, Checkbox, and a submit Button into a
// realistic form row — Label/for pairs with Input/Checkbox by id, the
// pattern most real forms actually reach for.
component FormRow() {
	<form class="flex max-w-sm flex-col gap-4">
		<div class="flex flex-col gap-2">
			<ui.Label for="form-row-email">Email</ui.Label>
			<ui.Input id="form-row-email" type="email" name="email" placeholder="[email protected]" required/>
		</div>
		<div class="flex items-center gap-2">
			<ui.Checkbox id="form-row-remember" name="remember"/>
			<ui.Label for="form-row-remember">Remember me</ui.Label>
		</div>
		<ui.Button type="submit">Sign in</ui.Button>
	</form>
}