Toggle
Two-state button that can be switched on or off.
TailwindCSS
package showcase
import "github.com/axzilla/templui/internal/components/toggle"
templ ToggleDefault() {
@toggle.Toggle()
}
Installation
templui add toggleCopy and paste the following code into your project:
package toggle import "github.com/axzilla/templui/internal/utils" type Props struct { ID string Class string Attributes templ.Attributes Name string Disabled bool Checked bool } templ Toggle(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } if p.ID == "" { {{ p.ID = utils.RandomID() }} } <label for={ p.ID } class={ utils.TwMerge( "inline-flex cursor-pointer items-center gap-2", utils.If(p.Disabled, "cursor-not-allowed"), ) } > <input x-ref={ p.ID } id={ p.ID } if p.Name != "" { name={ p.Name } } type="checkbox" checked?={ p.Checked } disabled?={ p.Disabled } class="peer hidden" role="switch" { p.Attributes... } /> <div class={ utils.TwMerge( "relative h-6 w-10", "after:absolute after:left-0.5 after:top-0.5", "after:h-5 after:w-5", "rounded-full bg-neutral-200", "after:rounded-full after:bg-muted-foreground", "after:content-['']", "after:transition-all", "peer-checked:bg-primary", "peer-checked:after:translate-x-[16px]", "peer-checked:after:bg-secondary", "peer-disabled:opacity-50", p.Class, ), } aria-hidden="true" ></div> </label> }Update the import paths to match your project setup.
Examples
Checked
package showcase
import "github.com/axzilla/templui/internal/components/toggle"
templ ToggleChecked() {
@toggle.Toggle(toggle.Props{
Checked: true,
})
}
With Label
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/toggle"
)
templ ToggleWithLabel() {
<div class="flex items-center gap-2">
@toggle.Toggle(toggle.Props{
ID: "toggle-with-label",
})
@label.Label(label.Props{
For: "toggle-with-label",
}) {
Airplane Mode
}
</div>
}
Disabled
package showcase
import (
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/toggle"
)
templ ToggleDisabled() {
<div class="flex items-center gap-2">
@toggle.Toggle(toggle.Props{
ID: "toggle-disabled",
Disabled: true,
})
@label.Label(label.Props{
For: "toggle-disabled",
}) {
Airplane Mode
}
</div>
}
Form
Manage your devices connectivity options.
Please configure your connectivity settings.
package showcase
import (
"github.com/axzilla/templui/internal/components/form"
"github.com/axzilla/templui/internal/components/toggle"
)
templ ToggleForm() {
<div class="w-full max-w-sm">
@form.Item() {
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
ID: "airplane-mode",
Name: "airplane",
})
@form.Label(form.LabelProps{
For: "airplane-mode",
}) {
Airplane Mode
}
}
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
ID: "wifi-mode",
Name: "wifi",
Disabled: true,
})
@form.Label(form.LabelProps{
For: "wifi-mode",
}) {
Wi-Fi
}
}
@form.ItemFlex() {
@toggle.Toggle(toggle.Props{
ID: "bluetooth-mode",
Name: "bluetooth",
Checked: true,
})
@form.Label(form.LabelProps{
For: "bluetooth-mode",
}) {
Bluetooth
}
}
@form.Description() {
Manage your devices connectivity options.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please configure your connectivity settings.
}
}
</div>
}