AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Toggle
A two-state button that can be either on or off.
templ
templ ToggleDemo() {
<div class="flex flex-wrap items-center gap-2" x-data="{ bold: false, italic: false, underline: false }">
@ui.Toggle(ui.ToggleVariantDefault, ui.ToggleSizeDefault, "bold", "", templ.Attributes{"aria-label": "Toggle bold"}) {
@icons.Bold(icons.Props{Class: "h-4 w-4"})
}
@ui.Toggle(ui.ToggleVariantSecondary, ui.ToggleSizeDefault, "italic", "", templ.Attributes{"aria-label": "Toggle italic"}) {
@icons.Italic(icons.Props{Class: "h-4 w-4"})
}
@ui.Toggle(ui.ToggleVariantDefault, ui.ToggleSizeLarge, "underline", "", templ.Attributes{"aria-label": "Toggle underline"}) {
@icons.Underline(icons.Props{Class: "mr-2 h-4 w-4"})
Underline
}
</div>
}