Radio

Single-select form input. Supports color variants, sizes, descriptions, bordered containers, segmented pill bars, and first-class HTMX + Alpine.js interaction primitives.

MacWindowsLinux

Usage Example

@radio.Radio(radio.Config{
    ID: "r-mac", Name: "os", Value: "mac", Label: "Mac", Checked: true,
})
@radio.Radio(radio.Config{
    ID: "r-win", Name: "os", Value: "windows", Label: "Windows",
})

With Container

Wraps each option in a bordered container with Container: true.

MacWindowsLinux

With Container

@radio.Radio(radio.Config{
    ID: "r-c-mac", Name: "os-c", Value: "mac", Label: "Mac",
    Container: true, Checked: true,
})

Segmented

A true segmented control (connected pill bar). Set Segmented: true and group inside RadioBar.

Mac Windows Linux

Segmented

@radio.RadioBar() {
    @radio.Radio(radio.Config{ID: "r-seg-a", Name: "g", Value: "a", Label: "A", Segmented: true, Checked: true})
    @radio.Radio(radio.Config{ID: "r-seg-b", Name: "g", Value: "b", Label: "B", Segmented: true})
}

With Description

Add helper text under the label via HelperText (wire HelperTextID for aria-describedby).

Mac For macOS Big Sur and higher.

Windows Windows 10 and Windows 11.

With Description

@radio.Radio(radio.Config{
    ID: "r-desc-mac", Name: "os-desc", Value: "mac", Label: "Mac",
    HelperText:   "For macOS Big Sur and higher.",
    HelperTextID: "r-desc-mac-desc",
    Checked:       true,
})

Color Variants

Six semantic colors via Variant: Primary, Secondary, Info, Success, Warning, Danger.

Color Variants

@radio.Radio(radio.Config{ID: "r-success", Name: "v", Value: "su", Label: "Success", Variant: radio.Success, Checked: true})
@radio.Radio(radio.Config{ID: "r-danger", Name: "v2", Value: "d", Label: "Danger", Variant: radio.Danger, Checked: true})

Sizes

Four box sizes via Size: SizeSM, SizeMD (default), SizeLG, SizeXL.

Size

sm md lg xl

Small

Medium

Large

Sizes

@radio.Radio(radio.Config{
    ID: "r-size-md", Name: "radio-size-preview", Value: "md",
    Label: "Medium", Size: radio.SizeMD, Checked: true,
})

Disabled

Disabled: true blocks interaction and dims the control.

Disabled uncheckedDisabled checked

Disabled

@radio.Radio(radio.Config{ID: "r-d1", Name: "dis", Value: "a", Label: "Disabled unchecked", Disabled: true})
@radio.Radio(radio.Config{ID: "r-d2", Name: "dis", Value: "b", Label: "Disabled checked", Disabled: true, Checked: true})

Alpine — client state

Wire AlpineConfig for client-only state. Clicks update local x-data without a server roundtrip.

sm md lg

Selected:

Alpine — client state

@radio.Radio(radio.Config{
    ID: "r-a-md", Name: "size-a", Value: "md", Label: "md", Segmented: true,
    Alpine: &radio.AlpineConfig{
        BindChecked: "selected === 'md'",
        OnChange:    "selected = 'md'",
    },
})

HTMX — server roundtrip

Wire HTMXConfig for a server roundtrip on change. The response swaps into the target.

sm md lg

No selection yet.

HTMX — server roundtrip

@radio.Radio(radio.Config{
    ID: "r-h-md", Name: "size-h", Value: "md", Label: "md", Segmented: true,
    HTMX: &radio.HTMXConfig{
        Get:    "/api/components/radio/echo?value=md",
        Target: "#radio-htmx-out",
        Swap:   "innerHTML",
    },
})

Hybrid — Alpine state + HTMX persistence

Set both Alpine and HTMX: a single click updates client state and fires the server roundtrip.

sm md lg

Alpine:

Server: not called yet.

Hybrid — Alpine state + HTMX persistence

@radio.Radio(radio.Config{
    ID: "r-hy-md", Name: "size-hy", Value: "md", Label: "md", Segmented: true,
    Alpine: &radio.AlpineConfig{BindChecked: "selected === 'md'", OnChange: "selected = 'md'"},
    HTMX:   &radio.HTMXConfig{Get: "/api/components/radio/echo?value=md", Target: "#radio-hybrid-out", Swap: "innerHTML"},
})

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id for the radio input (also the label's for target).
`Name`	`string`	`""`	Form field name shared by all radios in a group.
`Value`	`string`	`""`	Form field value submitted when selected.
`Label`	`string`	`""`	Text displayed next to the radio.
`Checked`	`bool`	`false`	Initial checked state.
`Disabled`	`bool`	`false`	Disables interaction and dims the control.
`Variant`	`Variant`	`Primary`	Color scheme: "primary", "secondary", "info", "success", "warning", "danger".
`Size`	`Size`	`SizeMD`	Box size: "sm", "md", "lg", "xl".
`HelperText`	`string`	`""`	Helper text rendered below the label.
`HelperTextID`	`string`	`""`	ID of the description element for aria-describedby wiring.
`Container`	`bool`	`false`	Wraps the radio in a bordered container.
`Segmented`	`bool`	`false`	Renders a segmented-control pill (sr-only input); group inside RadioBar.
`BadgeColor`	`string`	`""`	Wraps the label in a semi-solid badge of the given color.
`HTMX`	`*HTMXConfig`	`nil`	Server interaction on change (Get/Post/Target/Swap/...).
`Alpine`	`*AlpineConfig`	`nil`	Client-side state (Model/OnChange/BindChecked/...).
`InputAttrs`	`templ.Attributes`	`nil`	Escape hatch applied last to the input; wins on conflict.
`RootClass`	`string`	`""`	Extra classes appended to the label root.

Form Range