Radio

package showcase

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

templ RadioChecked() {
	@radio.Radio(radio.Props{
		Checked: true,
	})
}

package showcase

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

templ RadioWithLabel() {
	<div class="flex gap-2 items-center">
		@radio.Radio(radio.Props{
			ID: "radio-with-label",
		})
		@label.Label(label.Props{
			For: "radio-with-label",
		}) {
			Label
		}
	</div>
}

package showcase

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

templ RadioDisabled() {
	<div class="flex gap-2 items-center">
		@radio.Radio(radio.Props{
			ID:       "radio-disabled",
			Disabled: true,
		})
		@label.Label(label.Props{
			For: "radio-disabled",
		}) {
			Disabled
		}
	</div>
}

package showcase

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

templ RadioForm() {
	<div class="w-full max-w-sm">
		@form.Item() {
			@form.ItemFlex() {
				@radio.Radio(radio.Props{
					Name:    "radio-form",
					ID:      "r1",
					Checked: true,
				})
				@form.Label(form.LabelProps{
					For: "r1",
				}) {
					All new products
				}
			}
			@form.ItemFlex() {
				@radio.Radio(radio.Props{
					Name:     "radio-form",
					ID:       "r2",
					Disabled: true,
				})
				@form.Label(form.LabelProps{
					For: "r2",
				}) {
					Create a wishlist (Coming Soon)
				}
			}
			@form.ItemFlex() {
				@radio.Radio(radio.Props{
					Name: "radio-form",
					ID:   "r3",
				})
				@form.Label(form.LabelProps{
					For: "r3",
				}) {
					No notifications
				}
			}
			@form.Description() {
				You can change your preferences at any time.
			}
			@form.Message(form.MessageProps{
				Variant: form.MessageVariantError,
			}) {
				We will send you an email when new products are available.
			}
		}
	</div>
}