Toggle
Two-state button that can be switched on or off.
TailwindCSS
package showcase
import "github.com/axzilla/templui/components"
templ ToggleDefault() {
@components.Toggle()
}
package components
import "github.com/axzilla/templui/utils"
type ToggleProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Disabled bool
Checked bool
}
templ Toggle(props ...ToggleProps) {
{{ var p ToggleProps }}
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>
}
Usage
@components.Toggle(components.ToggleProps{...})Examples
Checked
package showcase
import "github.com/axzilla/templui/components"
templ ToggleChecked() {
@components.Toggle(components.ToggleProps{
Checked: true,
})
}
package components
import "github.com/axzilla/templui/utils"
type ToggleProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Disabled bool
Checked bool
}
templ Toggle(props ...ToggleProps) {
{{ var p ToggleProps }}
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>
}
With Label
package showcase
import "github.com/axzilla/templui/components"
templ ToggleWithLabel() {
<div class="flex items-center gap-2">
@components.Toggle(components.ToggleProps{
ID: "toggle-with-label",
})
@components.Label(components.LabelProps{
For: "toggle-with-label",
}) {
Airplane Mode
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type ToggleProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Disabled bool
Checked bool
}
templ Toggle(props ...ToggleProps) {
{{ var p ToggleProps }}
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>
}
Disabled
package showcase
import "github.com/axzilla/templui/components"
templ ToggleDisabled() {
<div class="flex items-center gap-2">
@components.Toggle(components.ToggleProps{
ID: "toggle-disabled",
Disabled: true,
})
@components.Label(components.LabelProps{
For: "toggle-disabled",
}) {
Airplane Mode
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type ToggleProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Disabled bool
Checked bool
}
templ Toggle(props ...ToggleProps) {
{{ var p ToggleProps }}
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>
}
Form
Manage your device's connectivity options.
Please configure your connectivity settings.
package showcase
import "github.com/axzilla/templui/components"
templ ToggleForm() {
<div class="w-full max-w-sm">
@components.FormItem() {
@components.FormItemFlex() {
@components.Toggle(components.ToggleProps{
ID: "airplane-mode",
Name: "airplane",
})
@components.FormLabel(components.FormLabelProps{
For: "airplane-mode",
}) {
Airplane Mode
}
}
@components.FormItemFlex() {
@components.Toggle(components.ToggleProps{
ID: "wifi-mode",
Name: "wifi",
Disabled: true,
})
@components.FormLabel(components.FormLabelProps{
For: "wifi-mode",
}) {
Wi-Fi
}
}
@components.FormItemFlex() {
@components.Toggle(components.ToggleProps{
ID: "bluetooth-mode",
Name: "bluetooth",
Checked: true,
})
@components.FormLabel(components.FormLabelProps{
For: "bluetooth-mode",
}) {
Bluetooth
}
}
@components.FormDescription() {
Manage your device's connectivity options.
}
@components.FormMessage(components.FormMessageProps{
Variant: components.FormMessageVariantError,
}) {
Please configure your connectivity settings.
}
}
</div>
}
package components
import "github.com/axzilla/templui/utils"
type ToggleProps struct {
ID string
Class string
Attributes templ.Attributes
Name string
Disabled bool
Checked bool
}
templ Toggle(props ...ToggleProps) {
{{ var p ToggleProps }}
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>
}