Label

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/checkbox"	"github.com/axadrn/shadcn-templ/v2/components/label") templ LabelDemo() {	<div class="flex gap-2">		@checkbox.Checkbox(checkbox.Props{ID: "terms"})		@label.Label(label.Props{For: "terms"}) {			Accept terms and conditions		}	</div>}

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/checkbox"	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/input"	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select"	"github.com/axadrn/shadcn-templ/v2/components/textarea") templ FieldDemo() {	<div class="w-full max-w-md">		<form>			@field.Group() {				@field.Set() {					@field.Legend() {						Payment Method					}					@field.Description() {						All transactions are secure and encrypted					}					@field.Group() {						@field.Field() {							@field.Label(field.LabelProps{For: "checkout-7j9-card-name-43j"}) {								Name on Card							}							@input.Input(input.Props{								ID:          "checkout-7j9-card-name-43j",								Placeholder: "Axel Adrian",							})						}						@field.Field() {							@field.Label(field.LabelProps{For: "checkout-7j9-card-number-uw1"}) {								Card Number							}							@input.Input(input.Props{								ID:          "checkout-7j9-card-number-uw1",								Placeholder: "1234 5678 9012 3456",							})							@field.Description() {								Enter your 16-digit card number							}						}						<div class="grid grid-cols-3 gap-4">							@field.Field() {								@field.Label(field.LabelProps{For: "checkout-exp-month-ts6"}) {									Month								}								@selectcomp.Select() {									@selectcomp.Trigger(selectcomp.TriggerProps{ID: "checkout-exp-month-ts6"}) {										@selectcomp.Value(selectcomp.ValueProps{Placeholder: "MM"})									}									@selectcomp.Content() {										@selectcomp.Item(selectcomp.ItemProps{Value: "01"}) {											01										}										@selectcomp.Item(selectcomp.ItemProps{Value: "02"}) {											02										}										@selectcomp.Item(selectcomp.ItemProps{Value: "03"}) {											03										}										@selectcomp.Item(selectcomp.ItemProps{Value: "04"}) {											04										}										@selectcomp.Item(selectcomp.ItemProps{Value: "05"}) {											05										}										@selectcomp.Item(selectcomp.ItemProps{Value: "06"}) {											06										}										@selectcomp.Item(selectcomp.ItemProps{Value: "07"}) {											07										}										@selectcomp.Item(selectcomp.ItemProps{Value: "08"}) {											08										}										@selectcomp.Item(selectcomp.ItemProps{Value: "09"}) {											09										}										@selectcomp.Item(selectcomp.ItemProps{Value: "10"}) {											10										}										@selectcomp.Item(selectcomp.ItemProps{Value: "11"}) {											11										}										@selectcomp.Item(selectcomp.ItemProps{Value: "12"}) {											12										}									}								}							}							@field.Field() {								@field.Label(field.LabelProps{For: "checkout-7j9-exp-year-f59"}) {									Year								}								@selectcomp.Select() {									@selectcomp.Trigger(selectcomp.TriggerProps{ID: "checkout-7j9-exp-year-f59"}) {										@selectcomp.Value(selectcomp.ValueProps{Placeholder: "YYYY"})									}									@selectcomp.Content() {										@selectcomp.Item(selectcomp.ItemProps{Value: "2024"}) {											2024										}										@selectcomp.Item(selectcomp.ItemProps{Value: "2025"}) {											2025										}										@selectcomp.Item(selectcomp.ItemProps{Value: "2026"}) {											2026										}										@selectcomp.Item(selectcomp.ItemProps{Value: "2027"}) {											2027										}										@selectcomp.Item(selectcomp.ItemProps{Value: "2028"}) {											2028										}										@selectcomp.Item(selectcomp.ItemProps{Value: "2029"}) {											2029										}									}								}							}							@field.Field() {								@field.Label(field.LabelProps{For: "checkout-7j9-cvv"}) {									CVV								}								@input.Input(input.Props{									ID:          "checkout-7j9-cvv",									Placeholder: "123",								})							}						</div>					}				}				@field.Separator()				@field.Set() {					@field.Legend() {						Billing Address					}					@field.Description() {						The billing address associated with your payment method					}					@field.Group() {						@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {							@checkbox.Checkbox(checkbox.Props{								ID:      "checkout-7j9-same-as-shipping-wgm",								Checked: true,							})							@field.Label(field.LabelProps{								For:   "checkout-7j9-same-as-shipping-wgm",								Class: "font-normal",							}) {								Same as shipping address							}						}					}				}				@field.Set() {					@field.Group() {						@field.Field() {							@field.Label(field.LabelProps{For: "checkout-7j9-optional-comments"}) {								Comments							}							@textarea.Textarea(textarea.Props{								ID:          "checkout-7j9-optional-comments",								Placeholder: "Add any additional comments",								Class:       "resize-none",							})						}					}				}				@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {					@button.Button(button.Props{Type: button.TypeSubmit}) {						Submit					}					@button.Button(button.Props{						Variant: button.VariantOutline,						Type:    button.TypeButton,					}) {						Cancel					}				}			}		</form>	</div>}