Skip to content
v0.2.7

Radio

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

Default Rendered example
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.

With Container Rendered example
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.

Segmented Rendered example
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).

With Description Rendered example
For macOS Big Sur and higher.
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 Tone: radio.TonePrimary, radio.ToneSecondary, radio.ToneInfo, radio.ToneSuccess, radio.ToneWarning, radio.ToneDanger.

Color Variants Rendered example
Color Variants 
@radio.Radio(radio.Config{ID: "r-success", Name: "v", Value: "su", Label: "Success", Tone: radio.ToneSuccess, Checked: true})
@radio.Radio(radio.Config{ID: "r-danger", Name: "v2", Value: "d", Label: "Danger", Tone: radio.ToneDanger, Checked: true})

Sizes

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

Sizes Rendered example
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 Rendered example
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.

Alpine — client state Rendered example
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.

HTMX — server roundtrip Rendered example
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.

Hybrid — Alpine state + HTMX persistence Rendered example
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"},
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/radio
Open v0.2.7 API
Form Range