AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Radio Group
A set of checkable buttons — known as radio buttons — where no more than one of the buttons can be checked at a time.
templ
templ RadioGroupDemo() {
<div class="flex flex-col gap-4">
@ui.RadioGroup(`{ rg_val: "option-one" }`, "", nil) {
<div class="flex items-center space-x-2">
@ui.RadioGroupItem("notify", "option-one", "rg_val", "", templ.Attributes{"id": "rg-option-one"})
@ui.Label("", templ.Attributes{"for": "rg-option-one"}) {
Default
}
</div>
<div class="flex items-center space-x-2">
@ui.RadioGroupItem("notify", "option-two", "rg_val", "", templ.Attributes{"id": "rg-option-two"})
@ui.Label("", templ.Attributes{"for": "rg-option-two"}) {
Comfortable
}
</div>
<div class="flex items-center space-x-2">
@ui.RadioGroupItem("notify", "option-three", "rg_val", "", templ.Attributes{"id": "rg-option-three"})
@ui.Label("", templ.Attributes{"for": "rg-option-three"}) {
Compact
}
</div>
}
</div>
}