Toggle

package showcase

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

templ ToggleChecked() {
	@toggle.Toggle(toggle.Props{
		Checked: true,
	})
}

package showcase

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

templ ToggleWithLabel() {
	<div class="flex items-center gap-2">
		@toggle.Toggle(toggle.Props{
			ID: "toggle-with-label",
		})
		@label.Label(label.Props{
			For: "toggle-with-label",
		}) {
			Airplane Mode	
		}
	</div>
}

package showcase

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

templ ToggleDisabled() {
	<div class="flex items-center gap-2">
		@toggle.Toggle(toggle.Props{
			ID:       "toggle-disabled",
			Disabled: true,
		})
		@label.Label(label.Props{
			For: "toggle-disabled",
		}) {
			Airplane Mode
		}
	</div>
}

package showcase

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

templ ToggleForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@toggle.Toggle(toggle.Props{
					ID:   "airplane-mode",
					Name: "airplane",
				})
				@form.Label(form.LabelProps{
					For: "airplane-mode",
				}) {
					Airplane Mode
				}
			}
			@form.ItemFlex() {
				@toggle.Toggle(toggle.Props{
					ID:       "wifi-mode",
					Name:     "wifi",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "wifi-mode",
				}) {
					Wi-Fi
				}
			}
			@form.ItemFlex() {
				@toggle.Toggle(toggle.Props{
					ID:      "bluetooth-mode",
					Name:    "bluetooth",
					Checked: true,
				})
				@form.Label(form.LabelProps{
					For: "bluetooth-mode",
				}) {
					Bluetooth
				}
			}
			@form.Description() {
				Manage your devices connectivity options.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				Please configure your connectivity settings.
			}
		}
	</div>
}