Checkbox

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

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

// Basic pairs a Checkbox with a Label via matching id/for.
component Basic() {
	<div class="flex items-center gap-2">
		<ui.Checkbox id="checkbox-basic-marketing"/>
		<ui.Label for="checkbox-basic-marketing">Send me marketing emails</ui.Label>
	</div>
}

package checkbox

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

// States renders Checkbox unchecked, checked, and disabled+checked —
// checked/disabled are bare boolean attributes forwarded through Checkbox's
// { attrs... } spread onto the native input, so browser :checked/:disabled
// truth drives the styling with no data-state plumbing.
component States() {
	<div class="flex flex-col gap-3">
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-unchecked" aria-invalid="true"/>
			<ui.Label for="checkbox-states-unchecked">Unchecked</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-checked" checked/>
			<ui.Label for="checkbox-states-checked">Checked</ui.Label>
		</div>
		<div class="flex items-center gap-2">
			<ui.Checkbox id="checkbox-states-disabled" checked disabled/>
			<ui.Label for="checkbox-states-disabled">Checked and disabled</ui.Label>
		</div>
	</div>
}

package checkbox

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

// Rtl mirrors shadcn's own checkbox-rtl demo: Field-composed checkboxes
// covering plain, described, disabled, and title+description shapes,
// translated to Arabic and wrapped in dir="rtl".
component Rtl() {
	<ui.FieldGroup dir="rtl" lang="ar" class="max-w-sm">
		<ui.Field orientation="horizontal">
			<ui.Checkbox id="checkbox-rtl-terms"/>
			<ui.Label for="checkbox-rtl-terms">قبول الشروط والأحكام</ui.Label>
		</ui.Field>
		<ui.Field orientation="horizontal">
			<ui.Checkbox id="checkbox-rtl-terms-2" checked/>
			<ui.FieldContent>
				<ui.FieldLabel for="checkbox-rtl-terms-2">قبول الشروط والأحكام</ui.FieldLabel>
				<ui.FieldDescription>بالنقر على هذا المربع، فإنك توافق على الشروط.</ui.FieldDescription>
			</ui.FieldContent>
		</ui.Field>
		<ui.Field orientation="horizontal" data-disabled="true">
			<ui.Checkbox id="checkbox-rtl-notify" disabled/>
			<ui.FieldLabel for="checkbox-rtl-notify">تفعيل الإشعارات</ui.FieldLabel>
		</ui.Field>
		<ui.FieldLabel>
			<ui.Field orientation="horizontal">
				<ui.Checkbox id="checkbox-rtl-notify-2"/>
				<ui.FieldContent>
					<ui.FieldTitle>تفعيل الإشعارات</ui.FieldTitle>
					<ui.FieldDescription>يمكنك تفعيل أو إلغاء تفعيل الإشعارات في أي وقت.</ui.FieldDescription>
				</ui.FieldContent>
			</ui.Field>
		</ui.FieldLabel>
	</ui.FieldGroup>
}