Radio
Control for selecting a single option from a list of choices.
TailwindCSS
package showcase
import "github.com/axzilla/templui/internal/components/radio"
templ RadioDefault() {
@radio.Radio()
}
Installation
templui add radioCopy and paste the following code into your project:
package radio import "github.com/axzilla/templui/internal/utils" type Props struct { ID string Class string Attributes templ.Attributes Name string Value string Disabled bool Required bool Checked bool } templ Radio(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } <input type="radio" if p.ID != "" { id={ p.ID } } if p.Name != "" { name={ p.Name } } if p.Value != "" { value={ p.Value } } checked?={ p.Checked } disabled?={ p.Disabled } required?={ p.Required } class={ utils.TwMerge( "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", "appearance-none rounded-full", "border-2 border-primary", "before:content[''] before:rounded-full before:bg-background", "checked:border-primary checked:bg-primary", "checked:before:visible", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", "focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed", p.Class, ), } { p.Attributes... } /> }Update the import paths to match your project setup.
Examples
Checked
package showcase
import "github.com/axzilla/templui/internal/components/radio"
templ RadioChecked() {
@radio.Radio(radio.Props{
Checked: true,
})
}
With Label
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/radio"
)
templ RadioWithLabel() {
<div class="flex gap-2 items-center">
@radio.Radio(radio.Props{
ID: "radio-with-label",
})
@label.Label(label.Props{
For: "radio-with-label",
}) {
Label
}
</div>
}
Disabled
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/radio"
)
templ RadioDisabled() {
<div class="flex gap-2 items-center">
@radio.Radio(radio.Props{
ID: "radio-disabled",
Disabled: true,
})
@label.Label(label.Props{
For: "radio-disabled",
}) {
Disabled
}
</div>
}
Form
You can change your preferences at any time.
We will send you an email when new products are available.
package showcase
import (
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/radio"
)
templ RadioForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.ItemFlex() {
@radio.Radio(radio.Props{
Name: "radio-form",
ID: "r1",
Checked: true,
})
@form.Label(form.LabelProps{
For: "r1",
}) {
All new products
}
}
@form.ItemFlex() {
@radio.Radio(radio.Props{
Name: "radio-form",
ID: "r2",
Disabled: true,
})
@form.Label(form.LabelProps{
For: "r2",
}) {
Create a wishlist (Coming Soon)
}
}
@form.ItemFlex() {
@radio.Radio(radio.Props{
Name: "radio-form",
ID: "r3",
})
@form.Label(form.LabelProps{
For: "r3",
}) {
No notifications
}
}
@form.Description() {
You can change your preferences at any time.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
We will send you an email when new products are available.
}
}
</div>
}