Unlock advanced features and priority support.
package showcase
import (
"github.com/templui/templui/internal/components/card"
"github.com/templui/templui/internal/components/label"
"github.com/templui/templui/internal/components/radio"
)
templ RadioDefault() {
<div class="flex flex-col gap-6">
<!-- Radio with description -->
<div class="flex flex-col gap-3">
<div class="flex items-start gap-3">
@radio.Radio(radio.Props{
ID: "plan-1",
Name: "options",
Value: "free",
})
<div class="grid gap-2">
@label.Label(label.Props{
For: "plan-1",
}) {
Free Plan
}
</div>
</div>
<div class="flex items-start gap-3">
@radio.Radio(radio.Props{
ID: "plan-2",
Name: "options",
Value: "pro",
Checked: true,
})
<div class="grid gap-2">
@label.Label(label.Props{
For: "plan-2",
}) {
Pro Plan
}
<p class="text-muted-foreground text-sm">
Unlock advanced features and priority support.
</p>
</div>
</div>
</div>
<!-- Disabled radio -->
<div class="flex items-center gap-3">
@radio.Radio(radio.Props{
ID: "enterprise-option",
Name: "options",
Value: "enterprise",
Disabled: true,
})
@label.Label(label.Props{
For: "enterprise-option",
}) {
Enterprise Plan (Coming Soon)
}
</div>
<!-- Radio in a card-like container -->
@label.Label(label.Props{
For: "card-option",
Class: "block cursor-pointer",
}) {
@card.Card(card.Props{
Class: "hover:border-primary/50 has-[:checked]:ring-1 has-[:checked]:ring-primary has-[:checked]:border-primary transition-all",
}) {
@card.Content(card.ContentProps{
Class: "p-3 flex items-start gap-3",
}) {
@radio.Radio(radio.Props{
ID: "card-option",
Name: "options",
Value: "premium",
})
<div class="grid gap-1.5">
<p class="text-sm leading-none font-medium">
Premium Features
</p>
<p class="text-muted-foreground text-sm">
Access all premium features with unlimited usage.
</p>
</div>
}
}
}
</div>
}
Installation
templui add radioExamples
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/templui/templui/internal/components/form"
"github.com/templui/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>
}
API Reference
Required parameter
Hover for description
Radio
Radio button input for selecting a single option from multiple choices.
| Name | Type | Default |
|---|---|---|
Unique identifier for the radio input element. | | - |
Additional CSS classes to apply to the radio input. | | - |
Additional HTML attributes to apply to the radio input element. | | - |
Name attribute for grouping radio buttons together. | | - |
Value attribute for the radio input element. | | - |
Whether the radio button is disabled and non-interactive. | | |
Whether the radio button is checked. | | |