AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Toggle Group
A set of two-state buttons that can be toggled on or off.
Single selection
Multiple selection
templ
templ ToggleGroupDemo() {
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<p class="text-sm text-muted-foreground">Single selection</p>
@ui.ToggleGroup(`{ tg: '' }`, "", nil) {
@ui.ToggleGroupItem("tg", "bold", "single", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle bold"}) {
@icons.Bold(icons.Props{Class: "h-4 w-4"})
}
@ui.ToggleGroupItem("tg", "italic", "single", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle italic"}) {
@icons.Italic(icons.Props{Class: "h-4 w-4"})
}
@ui.ToggleGroupItem("tg", "underline", "single", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle underline"}) {
@icons.Underline(icons.Props{Class: "h-4 w-4"})
}
}
</div>
<div class="flex flex-col gap-2">
<p class="text-sm text-muted-foreground">Multiple selection</p>
@ui.ToggleGroup(`{ tg: [] }`, "", nil) {
@ui.ToggleGroupItem("tg", "bold", "multiple", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle bold"}) {
@icons.Bold(icons.Props{Class: "h-4 w-4"})
}
@ui.ToggleGroupItem("tg", "italic", "multiple", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle italic"}) {
@icons.Italic(icons.Props{Class: "h-4 w-4"})
}
@ui.ToggleGroupItem("tg", "underline", "multiple", ui.ToggleVariantDefault, ui.ToggleSizeDefault, "", templ.Attributes{"aria-label": "Toggle underline"}) {
@icons.Underline(icons.Props{Class: "h-4 w-4"})
}
}
</div>
</div>
}