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.

Default

Comfortable

Compact

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/label"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupDemo() {	@radiogroup.RadioGroup(radiogroup.Props{Value: "comfortable", Class: "w-fit"}) {		<div class="flex items-center gap-3">			@radiogroup.Item(radiogroup.ItemProps{ID: "r1", Value: "default"})			@label.Label(label.Props{For: "r1"}) {				Default			}		</div>		<div class="flex items-center gap-3">			@radiogroup.Item(radiogroup.ItemProps{ID: "r2", Value: "comfortable"})			@label.Label(label.Props{For: "r2"}) {				Comfortable			}		</div>		<div class="flex items-center gap-3">			@radiogroup.Item(radiogroup.ItemProps{ID: "r3", Value: "compact"})			@label.Label(label.Props{For: "r3"}) {				Compact			}		</div>	}}

Installation

shadcn-templ add radio-group

Copy and paste the following code into your project.

components/radiogroup/radiogroup.templ

package radiogroup import (	"context" 	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "radioGroupState" type ctxState struct {	name     string	value    string	disabled bool} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Name is shared by all items in the group; a random name is generated	// when empty so the radios stay mutually exclusive.	Name string	// Value preselects the item with this value.	Value    string	Disabled bool} type ItemProps struct {	ID         string	Class      string	Attributes templ.Attributes	Name       string	Value      string	Form       string	Disabled   bool	Checked    bool} // RadioGroup is the vanilla port of Base UI's RadioGroup// (radio-group/RadioGroup.tsx): a div with role="radiogroup" that shares the// name and the selected value with the items (via ctx). radiogroup.js ports// the composite arrow-key navigation and roving tab stop.templ RadioGroup(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Name == "" {		{{ p.Name = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{name: p.Name, value: p.Value, disabled: p.Disabled}) }}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="radio-group"		data-tui-radio-group		role="radiogroup"		if p.Disabled {			aria-disabled="true"		}		class={ utils.CN("cn-radio-group w-full", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} // Item is the vanilla port of Base UI's Radio.Root// (radio/root/RadioRoot.tsx): a span root carries role="radio", aria-checked// and the data-checked/data-unchecked/data-disabled state attributes the// style CSS keys on, and a visually hidden native radio rendered beside it// carries id/name/value/form for label association and form submission. The// checked item is the group's roving tab stop (CompositeItem, tabindex 0;// when no item is checked, radiogroup.js promotes the first enabled item);// radiogroup.js ports the runtime behavior.templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{		s := state(ctx)		if p.Name == "" {			p.Name = s.name		}		checked := p.Checked || (s.value != "" && s.value == p.Value)		disabled := p.Disabled || s.disabled	}}	<span		data-slot="radio-group-item"		data-tui-radio-group-item		role="radio"		if checked {			aria-checked="true"			data-checked		} else {			aria-checked="false"			data-unchecked		}		if disabled {			data-disabled			aria-disabled="true"		}		if checked && !disabled {			tabindex="0"		} else {			tabindex="-1"		}		class={			utils.CN(				// 1:1 base/ui/radio-group.tsx: structure lives here, the look comes				// from the active style-*.css via cn-radio-group-item.				"cn-radio-group-item group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",				p.Class,			),		}		{ p.Attributes... }	>		// Base UI unmounts the indicator while unchecked; our pendant toggles		// the hidden attribute instead (same precedent as the context-menu		// indicator), radiogroup.js keeps it in sync.		<span			data-slot="radio-group-indicator"			if checked {				data-checked			} else {				data-unchecked				hidden			}			class="cn-radio-group-indicator"		>			<span class="cn-radio-group-indicator-icon"></span>		</span>	</span>	// Base UI renders the hidden input beside the root. It owns the id, so	// native <label for> association keeps working; the inline styles are the	// visuallyHiddenInput/visuallyHidden pendants from	// @base-ui/utils/visuallyHidden.ts (named inputs stay absolute so native	// validation popups anchor near the control).	<input		type="radio"		data-tui-radio-input		aria-hidden="true"		tabindex="-1"		checked?={ checked }		disabled?={ disabled }		if p.ID != "" {			id={ p.ID }		}		if p.Name != "" {			name={ p.Name }		}		if p.Value != "" {			value={ p.Value }		}		if p.Form != "" {			form={ p.Form }		}		if p.Name != "" {			style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:absolute"		} else {			style="clip-path:inset(50%);overflow:hidden;white-space:nowrap;border:0;padding:0;width:1px;height:1px;margin:-1px;position:fixed;top:0;left:0"		}	/>}

Update the import paths to match your project setup.

Usage

import (	"github.com/axadrn/shadcn-templ/v2/components/label"	"github.com/axadrn/shadcn-templ/v2/components/radio")

@radiogroup.RadioGroup(radiogroup.Props{Value: "option-one"}) {	<div class="flex items-center gap-3">		@radiogroup.Item(radiogroup.ItemProps{ID: "option-one", Value: "option-one"})		@label.Label(label.Props{For: "option-one"}) {			Option One		}	</div>	<div class="flex items-center gap-3">		@radiogroup.Item(radiogroup.ItemProps{ID: "option-two", Value: "option-two"})		@label.Label(label.Props{For: "option-two"}) {			Option Two		}	</div>}

Composition

Use the following composition to build a RadioGroup:

radiogroup.RadioGroup├── radiogroup.Item└── radiogroup.Item

Description

Radio group items with a description using the Field component.

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupDescription() {	@radiogroup.RadioGroup(radiogroup.Props{Value: "comfortable", Class: "w-fit"}) {		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r1", Value: "default"})			@field.Content() {				@field.Label(field.LabelProps{For: "desc-r1"}) {					Default				}				@field.Description() {					Standard spacing for most use cases.				}			}		}		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r2", Value: "comfortable"})			@field.Content() {				@field.Label(field.LabelProps{For: "desc-r2"}) {					Comfortable				}				@field.Description() {					More space between elements.				}			}		}		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r3", Value: "compact"})			@field.Content() {				@field.Label(field.LabelProps{For: "desc-r3"}) {					Compact				}				@field.Description() {					Minimal spacing for dense layouts.				}			}		}	}}

Choice Card

Use field.Label to wrap the entire field.Field for a clickable card-style selection.

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupChoiceCard() {	@radiogroup.RadioGroup(radiogroup.Props{Value: "plus", Class: "max-w-sm"}) {		@field.Label(field.LabelProps{For: "plus-plan"}) {			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@field.Content() {					@field.Title() {						Plus					}					@field.Description() {						For individuals and small teams.					}				}				@radiogroup.Item(radiogroup.ItemProps{ID: "plus-plan", Value: "plus"})			}		}		@field.Label(field.LabelProps{For: "pro-plan"}) {			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@field.Content() {					@field.Title() {						Pro					}					@field.Description() {						For growing businesses.					}				}				@radiogroup.Item(radiogroup.ItemProps{ID: "pro-plan", Value: "pro"})			}		}		@field.Label(field.LabelProps{For: "enterprise-plan"}) {			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@field.Content() {					@field.Title() {						Enterprise					}					@field.Description() {						For large teams and enterprises.					}				}				@radiogroup.Item(radiogroup.ItemProps{ID: "enterprise-plan", Value: "enterprise"})			}		}	}}

Fieldset

Use field.Set and field.Legend to group radio items with a label and description.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupFieldset() {	@field.Set(field.SetProps{Class: "w-full max-w-xs"}) {		@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {			Subscription Plan		}		@field.Description() {			Yearly and lifetime plans offer significant savings.		}		@radiogroup.RadioGroup(radiogroup.Props{Value: "monthly"}) {			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-monthly", Value: "monthly"})				@field.Label(field.LabelProps{For: "plan-monthly", Class: "font-normal"}) {					Monthly ($9.99/month)				}			}			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-yearly", Value: "yearly"})				@field.Label(field.LabelProps{For: "plan-yearly", Class: "font-normal"}) {					Yearly ($99.99/year)				}			}			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-lifetime", Value: "lifetime"})				@field.Label(field.LabelProps{For: "plan-lifetime", Class: "font-normal"}) {					Lifetime ($299.99)				}			}		}	}}

Disabled

Use the Disabled prop on radiogroup.RadioGroup to disable all items.

Disabled

Option 2

Option 3

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupDisabled() {	@radiogroup.RadioGroup(radiogroup.Props{Value: "option2", Class: "w-fit"}) {		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"data-disabled": "true"}}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-1", Value: "option1", Disabled: true})			@field.Label(field.LabelProps{For: "disabled-1", Class: "font-normal"}) {				Disabled			}		}		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-2", Value: "option2"})			@field.Label(field.LabelProps{For: "disabled-2", Class: "font-normal"}) {				Option 2			}		}		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-3", Value: "option3"})			@field.Label(field.LabelProps{For: "disabled-3", Class: "font-normal"}) {				Option 3			}		}	}}

Invalid

Use aria-invalid on radiogroup.Item and Invalid on field.Field to show validation errors.

Notification Preferences

Choose how you want to receive notifications.

Email only

SMS only

Both Email & SMS

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/radiogroup") templ RadioGroupInvalid() {	@field.Set(field.SetProps{Class: "w-full max-w-xs"}) {		@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {			Notification Preferences		}		@field.Description() {			Choose how you want to receive notifications.		}		@radiogroup.RadioGroup(radiogroup.Props{Value: "email"}) {			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-email", Value: "email", Attributes: templ.Attributes{"aria-invalid": "true"}})				@field.Label(field.LabelProps{For: "invalid-email", Class: "font-normal"}) {					Email only				}			}			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-sms", Value: "sms", Attributes: templ.Attributes{"aria-invalid": "true"}})				@field.Label(field.LabelProps{For: "invalid-sms", Class: "font-normal"}) {					SMS only				}			}			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-both", Value: "both", Attributes: templ.Attributes{"aria-invalid": "true"}})				@field.Label(field.LabelProps{For: "invalid-both", Class: "font-normal"}) {					Both Email & SMS				}			}		}	}}

API Reference

RadioGroup

The radiogroup.RadioGroup component shares the name and the selected value with its items.

Prop	Type	Default
`Name`	`string`	random
`Value`	`string`	-
`Disabled`	`bool`	`false`
`Class`	`string`	-

RadioGroupItem

The radiogroup.Item component is a single radio button with a hidden native input.

Prop	Type	Default
`Name`	`string`	group
`Value`	`string`	-
`Checked`	`bool`	`false`
`Disabled`	`bool`	`false`
`Form`	`string`	-
`Class`	`string`	-

Progress Select

On This Page

Installation Usage Composition Description Choice Card Fieldset Disabled Invalid API Reference RadioGroup RadioGroupItem

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.