Checkbox

package showcase

import "github.com/axzilla/templui/internal/components/checkbox"

templ CheckboxChecked() {
	@checkbox.Checkbox(checkbox.Props{
		Checked: true,
	},
	)
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/checkbox"
	"github.com/axzilla/templui/internal/components/label"
)

templ CheckboxWithLabel() {
	<div class="flex items-center gap-2">
		@checkbox.Checkbox(checkbox.Props{
			ID: "checkbox-with-label",
		})
		@label.Label(label.Props{
			For: "checkbox-with-label",
		}) {
			Accept terms and conditions
		}
	</div>
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/checkbox"
	"github.com/axzilla/templui/internal/components/label"
)

templ CheckboxDisabled() {
	<div class="flex items-center gap-2">
		@checkbox.Checkbox(checkbox.Props{
			Disabled: true,
			ID:       "checkbox-disabled",
		},
		)
		@label.Label(label.Props{
			For: "checkbox-disabled",
		}) {
			Accept terms and conditions
		}
	</div>
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/checkbox"
	"github.com/axzilla/templui/internal/components/icon"
)

templ CheckboxCustomIcon() {
	@checkbox.Checkbox(checkbox.Props{
		Icon:    icon.Plus(icon.Props{Size: 12}),
		Checked: true,
	},
	)
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/checkbox"
	"github.com/axzilla/templui/internal/components/form"
)

templ CheckboxForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@checkbox.Checkbox(
					checkbox.Props{
						Name:    "interests",
						Value:   "design",
						ID:      "c1",
						Checked: true,
					},
				)
				@form.Label(form.LabelProps{
					For: "c1",
				}) {
					Dessign and UX
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:     "interests",
					Value:    "development",
					ID:       "c2",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "c2",
				}) {
					Development (Coming Soon)
				}
			}
			@form.ItemFlex() {
				@checkbox.Checkbox(checkbox.Props{
					Name:  "interests",
					Value: "marketing",
					ID:    "c3",
				})
				@form.Label(form.LabelProps{
					For: "c3",
				}) {
					Business and Marketing
				}
			}
			@form.Description() {
				Choose all areas that interest you.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please select at least one interest.
			}
		}
	</div>
}