Radio

Radio

Radio button inputs for selecting a single option from a group.

Basic Plan

1234567891011121314
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioDefault() {
	@popui.Radio(props.Radio{
		Name:  "plan",
		Value: "basic",
		Label: "Basic Plan",
	})
}

Checked State

Radio can be pre-checked using the Checked prop.

Basic Plan

Pro Plan

12345678910111213141516171819202122
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioChecked() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:    "subscription",
			Value:   "basic",
			Label:   "Basic Plan",
		})
		@popui.Radio(props.Radio{
			Name:    "subscription",
			Value:   "pro",
			Label:   "Pro Plan",
			Checked: true,
		})
	</div>
}

Disabled State

Disabled radio buttons with reduced opacity.

Disabled radio

Disabled checked radio

123456789101112131415161718192021222324
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioDisabled() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:     "option",
			Value:    "1",
			Label:    "Disabled radio",
			Disabled: true,
		})
		@popui.Radio(props.Radio{
			Name:     "option",
			Value:    "2",
			Label:    "Disabled checked radio",
			Checked:  true,
			Disabled: true,
		})
	</div>
}

With Description

Add a description below the label for additional context.

Select your subscription

Free Perfect for personal projects and testing.

Pro - $9/month Best for professionals and small teams.

Enterprise Custom pricing for large organizations.

1234567891011121314151617181920212223242526272829303132
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioWithDescription() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Select your subscription",
	}) {
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "free",
			Label:       "Free",
			Description: "Perfect for personal projects and testing.",
			Checked:     true,
		})
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "pro",
			Label:       "Pro - $9/month",
			Description: "Best for professionals and small teams.",
		})
		@popui.Radio(props.Radio{
			Name:        "subscription",
			Value:       "enterprise",
			Label:       "Enterprise",
			Description: "Custom pricing for large organizations.",
		})
	}
}

Option Group

Group multiple radio buttons together with a label.

Choose your plan

Free

Pro - $9/month

Enterprise - Contact us

1234567891011121314151617181920212223242526272829
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioOptionGroup() {
	@popui.OptionGroup(props.OptionGroup{
		Label: "Choose your plan",
	}) {
		@popui.Radio(props.Radio{
			Name:    "plan",
			Value:   "free",
			Label:   "Free",
			Checked: true,
		})
		@popui.Radio(props.Radio{
			Name:  "plan",
			Value: "pro",
			Label: "Pro - $9/month",
		})
		@popui.Radio(props.Radio{
			Name:  "plan",
			Value: "enterprise",
			Label: "Enterprise - Contact us",
		})
	}
}

Card Variant

Card-style radio buttons with descriptions, perfect for selection groups that need more context.

Starter Perfect for individuals and small projects.

Professional Best for growing teams and businesses.

Enterprise Custom solutions for large organizations.

123456789101112131415161718192021222324252627282930313233
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioCard() {
	<div class="space-y-3">
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "starter",
			Label:       "Starter",
			Description: "Perfect for individuals and small projects.",
			Variant:     "card",
			Checked:     true,
		})
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "professional",
			Label:       "Professional",
			Description: "Best for growing teams and businesses.",
			Variant:     "card",
		})
		@popui.Radio(props.Radio{
			Name:        "plan-card",
			Value:       "enterprise",
			Label:       "Enterprise",
			Description: "Custom solutions for large organizations.",
			Variant:     "card",
		})
	</div>
}

Theme Variant

Circular color theme selector buttons. Use theme color constants (ColorSherwood, ColorOcean, ColorGrape, ColorMetal, ColorCosmos) as the Variant value.

12345678910111213141516171819202122232425262728293031323334353637
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ RadioTheme() {
	<div class="flex gap-3">
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "sherwood",
			Variant: props.ColorSherwood,
			Checked: true,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "ocean",
			Variant: props.ColorOcean,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "grape",
			Variant: props.ColorGrape,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "metal",
			Variant: props.ColorMetal,
		})
		@popui.Radio(props.Radio{
			Name:    "color-theme",
			Value:   "cosmos",
			Variant: props.ColorCosmos,
		})
	</div>
}

API Reference

Radio button input component.

Name	Type	Default	Description
`ID`	`string`	`auto-generated`	Unique identifier for the radio input
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes
`Label`	`string`	-	Label text for the radio button
`Description`	`string`	-	Optional description text shown below the label
`Name`	`string`	-	Name attribute for form submission
`Value`	`string`	-	Value of the radio button
`Variant`	`string`	-	Style variant: "card" for card-style radios, or theme colors (props.ColorSherwood, props.ColorOcean, props.ColorGrape, props.ColorMetal, props.ColorCosmos)
`Checked`	`bool`	`false`	Pre-check the radio button
`Autofocus`	`bool`	`false`	Autofocus the radio button on page load
`Disabled`	`bool`	`false`	Disable the radio button