AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Field
Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
We'll never share your email with anyone else.
Please enter a valid email address.
templ
templ FieldDemo() {
@ui.Field("w-[350px]", nil) {
@ui.Label("", templ.Attributes{"for": "field-email"}) {
Email
}
@ui.Input("email", ui.InputTypeEmail, "", templ.Attributes{"id": "field-email", "placeholder": "you@example.com"})
@ui.FieldDescription("", nil) {
We'll never share your email with anyone else.
}
@ui.FieldError("", "", nil) {
Please enter a valid email address.
}
}
}