Radio

Control for selecting a single option from a list of choices.

TailwindCSS

package showcase

import "github.com/axzilla/templui/pkg/components"

templ RadioDefault() {
	<div class="flex gap-2 items-center">
		@components.Radio(components.RadioProps{})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Radio renders a styled radio input button
templ Radio(props RadioProps) {
	<input
		x-ref={ props.ID }
		type="radio"
		id={ props.ID }
		name={ props.Name }
		value={ props.Value }
		checked?={ props.Checked }
		disabled?={ props.Disabled }
		class={
			utils.TwMerge(
				// Layout
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
		
				// Styling
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
		
				// States
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
		
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	/>
}

Usage

@components.Radio(components.RadioProps{...})

Examples

Checked

package showcase

import "github.com/axzilla/templui/pkg/components"

templ RadioChecked() {
	@components.Radio(components.RadioProps{
		Checked: true,
	})
}

package components

import "github.com/axzilla/templui/pkg/utils"

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Radio renders a styled radio input button
templ Radio(props RadioProps) {
	<input
		x-ref={ props.ID }
		type="radio"
		id={ props.ID }
		name={ props.Name }
		value={ props.Value }
		checked?={ props.Checked }
		disabled?={ props.Disabled }
		class={
			utils.TwMerge(
				// Layout
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
		
				// Styling
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
		
				// States
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
		
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	/>
}

With Label

package showcase

import "github.com/axzilla/templui/pkg/components"

templ RadioWithLabel() {
	<div class="flex gap-2 items-center">
		@components.Radio(components.RadioProps{
			ID: "radio-with-label",
		})
		@components.Label(components.LabelProps{
			For:  "radio-with-label",
			Text: "Label",
		})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Radio renders a styled radio input button
templ Radio(props RadioProps) {
	<input
		x-ref={ props.ID }
		type="radio"
		id={ props.ID }
		name={ props.Name }
		value={ props.Value }
		checked?={ props.Checked }
		disabled?={ props.Disabled }
		class={
			utils.TwMerge(
				// Layout
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
		
				// Styling
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
		
				// States
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
		
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	/>
}

Disabled

package showcase

import "github.com/axzilla/templui/pkg/components"

templ RadioDisabled() {
	<div class="flex gap-2 items-center">
		@components.Radio(components.RadioProps{
			ID:       "radio-disabled",
			Disabled: true,
		})
		@components.Label(components.LabelProps{
			For:  "radio-disabled",
			Text: "Disabled",
		})
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Radio renders a styled radio input button
templ Radio(props RadioProps) {
	<input
		x-ref={ props.ID }
		type="radio"
		id={ props.ID }
		name={ props.Name }
		value={ props.Value }
		checked?={ props.Checked }
		disabled?={ props.Disabled }
		class={
			utils.TwMerge(
				// Layout
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
		
				// Styling
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
		
				// States
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
		
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	/>
}

Form

package showcase

import "github.com/axzilla/templui/pkg/components"

templ RadioForm() {
	<div class="w-full max-w-sm">
		@components.FormItem(components.FormItemProps{}) {
			// Group Label
			@components.FormLabel(components.FormLabelProps{
				Text: "Notify me about new products",
			})
			// Option 1
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Radio(components.RadioProps{
					ID:      "r1",
					Name:    "notify",
					Value:   "all",
					Checked: true,
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "r1",
					Text: "All new products",
				})
			}
			// Option 2
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Radio(components.RadioProps{
					ID:       "r2",
					Name:     "notify",
					Value:    "wishlist",
					Disabled: true,
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "r2",
					Text: "Create a wishlist (Coming Soon)",
				})
			}
			// Option 3
			@components.FormItemFlex(components.FormItemProps{}) {
				@components.Radio(components.RadioProps{
					ID:    "r3",
					Name:  "notify",
					Value: "none",
				})
				@components.FormLabel(components.FormLabelProps{
					For:  "r3",
					Text: "No notifications",
				})
			}
			// Description
			@components.FormDescription(components.FormDescriptionProps{}) {
				You can change your preferences at any time.
			}
			// Error Message
			@components.FormMessage(components.FormMessageProps{
				Type:    "error",
				Message: "We will send you an email when new products are available.",
			})
		}
	</div>
}

package components

import "github.com/axzilla/templui/pkg/utils"

type RadioProps struct {
	Value      string           // Radio button value
	Name       string           // Form field name
	ID         string           // DOM identifier
	Disabled   bool             // Prevents interaction
	Checked    bool             // Selected state
	Class      string           // Additional CSS classes
	Attributes templ.Attributes // Additional HTML attributes
}

// Radio renders a styled radio input button
templ Radio(props RadioProps) {
	<input
		x-ref={ props.ID }
		type="radio"
		id={ props.ID }
		name={ props.Name }
		value={ props.Value }
		checked?={ props.Checked }
		disabled?={ props.Disabled }
		class={
			utils.TwMerge(
				// Layout
				"relative h-4 w-4",
				"before:absolute before:left-1/2 before:top-1/2",
				"before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2",
		
				// Styling
				"appearance-none rounded-full",
				"border-2 border-primary",
				"before:content[''] before:rounded-full before:bg-background",
		
				// States
				"checked:border-primary checked:bg-primary",
				"checked:before:visible",
				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
				"focus-visible:ring-offset-2 focus-visible:ring-offset-background",
				"disabled:cursor-not-allowed",
		
				// Custom
				props.Class,
			),
		}
		{ props.Attributes... }
	/>
}

Getting Started

Components

Radio

Usage

Examples