Radio
Control for selecting a single option from a list of choices.
TailwindCSS
package showcase
import "github.com/axzilla/templui/components"
templ RadioDefault() {
@components.Radio()
}
package components
import "github.com/axzilla/templui/utils"
type RadioProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Required bool
Checked bool
}
templ Radio(props ...RadioProps) {
{{ var p RadioProps }}
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... }
/>
}
Usage
@components.Radio(components.RadioProps{...})Examples
Checked
package showcase
import "github.com/axzilla/templui/components"
templ RadioChecked() {
@components.Radio(components.RadioProps{
Checked: true,
})
}
package components
import "github.com/axzilla/templui/utils"
type RadioProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Required bool
Checked bool
}
templ Radio(props ...RadioProps) {
{{ var p RadioProps }}
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... }
/>
}
With Label
package showcase
import "github.com/axzilla/templui/components"
templ RadioWithLabel() {
<div class="flex gap-2 items-center">
@components.Radio(components.RadioProps{
ID: "radio-with-label",
})
@components.Label(components.LabelProps{
For: "radio-with-label",
}) {
Label
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type RadioProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Required bool
Checked bool
}
templ Radio(props ...RadioProps) {
{{ var p RadioProps }}
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... }
/>
}
Disabled
package showcase
import "github.com/axzilla/templui/components"
templ RadioDisabled() {
<div class="flex gap-2 items-center">
@components.Radio(components.RadioProps{
ID: "radio-disabled",
Disabled: true,
})
@components.Label(components.LabelProps{
For: "radio-disabled",
}) {
Disabled
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type RadioProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Required bool
Checked bool
}
templ Radio(props ...RadioProps) {
{{ var p RadioProps }}
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... }
/>
}
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/components"
templ RadioForm() {
<div class="w-full max-w-sm">
@components.FormItem() {
@components.FormItemFlex() {
@components.Radio(components.RadioProps{
ID: "r1",
Checked: true,
})
@components.FormLabel(components.FormLabelProps{
For: "r1",
}) {
All new products
}
}
@components.FormItemFlex() {
@components.Radio(components.RadioProps{
ID: "r2",
Disabled: true,
})
@components.FormLabel(components.FormLabelProps{
For: "r2",
}) {
Create a wishlist (Coming Soon)
}
}
@components.FormItemFlex() {
@components.Radio(components.RadioProps{
ID: "r3",
})
@components.FormLabel(components.FormLabelProps{
For: "r3",
}) {
No notifications
}
}
@components.FormDescription() {
You can change your preferences at any time.
}
@components.FormMessage(components.FormMessageProps{
Variant: components.FormMessageVariantError,
}) {
We will send you an email when new products are available.
}
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type RadioProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Value string
Disabled bool
Required bool
Checked bool
}
templ Radio(props ...RadioProps) {
{{ var p RadioProps }}
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... }
/>
}