Back

Radio

Vertical Group (default)

Plan Type

Inline Group

Shirt Size

States

With Group Error

Choose one

Required group

Required choice *

Disabled group

Disabled choices

Custom Icons

Replace the default inner dot with any templ.Component via CheckedIcon.

Usage

Custom-styled radio buttons. Use RadioGroup for consistent layout.

@forms.RadioGroup(forms.RadioGroupProps{
    Label: "Choose Plan",
    Name:  "plan",
    Value: "pro",
    Options: []forms.RadioOption{
        {Label: "Free", Value: "free", Hint: "0€/mo"},
        {Label: "Pro",  Value: "pro",  Hint: "19€/mo"},
    },
    Error: "Selection required",
})

// Single Radio with custom icon:
@forms.Radio(forms.RadioProps{
    Label:       "Best option",
    Name:        "choice",
    Value:       "best",
    CheckedIcon: myStarIcon(), // templ.Component shown when selected
})