Radio

Radio renders one option in a named radio group.

github.com/fastygo/templ/ui

Summary

Radio renders one option in a named radio group.All radios in a group share the same Name value.

Use Cases

Pick one plan in a pricing form

Pick one payment method in checkout

Semantics

type attribute is always radio

Checked marks the selected option in the group

Example layout.group

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Class: "gap-2"}) {
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "free", ID: "plan-free", Checked: true})
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro"})
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Stack(ui.StackProps{Class: "gap-2"}) {
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "free", ID: "plan-free", Checked: true})
		@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro"})
	}
}

Example state.disabled

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro", Disabled: true})
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Radio(ui.RadioProps{Name: "plan", Value: "pro", ID: "plan-pro", Disabled: true})
}

API

AriaLabel · string — role: accessible-name

Checked · bool — role: state

Disabled · bool — role: state

Name · string — role: group-name

Size · string — role: density; enum: default|sm|lg|xs; default: default; source: utils.recipes.ControlSize

Value · string — role: option-value

Variant · string — role: appearance; enum: default|outline|ghost|unstyled; default: default; source: utils.recipes.ControlChrome