Toggle
Two-state button that can be switched on or off.
TailwindCSS
package showcase
import "github.com/axzilla/templui/pkg/components"
templ ToggleDefault() {
@components.Toggle(components.ToggleProps{})
}
package components
import "github.com/axzilla/templui/pkg/utils"
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
x-ref={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }
class="peer hidden"
role="switch"
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"relative h-6 w-10",
"after:absolute after:left-0.5 after:top-0.5",
"after:h-5 after:w-5",
// Styling
"rounded-full bg-neutral-200",
"after:rounded-full after:bg-muted-foreground",
"after:content-['']",
// States
"after:transition-all",
"peer-checked:bg-primary",
"peer-checked:after:translate-x-[16px]",
"peer-checked:after:bg-secondary",
"peer-disabled:opacity-50",
"peer-disabled:cursor-not-allowed",
// Custom
props.Class,
),
}
aria-hidden="true"
></div>
</label>
}
Usage
@components.Toggle(components.ToggleProps{...})Examples
Checked
package showcase
import "github.com/axzilla/templui/pkg/components"
templ ToggleChecked() {
@components.Toggle(components.ToggleProps{
Checked: true,
})
}
package components
import "github.com/axzilla/templui/pkg/utils"
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
x-ref={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }
class="peer hidden"
role="switch"
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"relative h-6 w-10",
"after:absolute after:left-0.5 after:top-0.5",
"after:h-5 after:w-5",
// Styling
"rounded-full bg-neutral-200",
"after:rounded-full after:bg-muted-foreground",
"after:content-['']",
// States
"after:transition-all",
"peer-checked:bg-primary",
"peer-checked:after:translate-x-[16px]",
"peer-checked:after:bg-secondary",
"peer-disabled:opacity-50",
"peer-disabled:cursor-not-allowed",
// Custom
props.Class,
),
}
aria-hidden="true"
></div>
</label>
}
With Label
package showcase
import "github.com/axzilla/templui/pkg/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",
Text: "Airplane Mode",
})
</div>
}
package components
import "github.com/axzilla/templui/pkg/utils"
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
x-ref={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }
class="peer hidden"
role="switch"
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"relative h-6 w-10",
"after:absolute after:left-0.5 after:top-0.5",
"after:h-5 after:w-5",
// Styling
"rounded-full bg-neutral-200",
"after:rounded-full after:bg-muted-foreground",
"after:content-['']",
// States
"after:transition-all",
"peer-checked:bg-primary",
"peer-checked:after:translate-x-[16px]",
"peer-checked:after:bg-secondary",
"peer-disabled:opacity-50",
"peer-disabled:cursor-not-allowed",
// Custom
props.Class,
),
}
aria-hidden="true"
></div>
</label>
}
Disabled
package showcase
import "github.com/axzilla/templui/pkg/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",
Text: "Airplane Mode",
})
</div>
}
package components
import "github.com/axzilla/templui/pkg/utils"
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
x-ref={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }
class="peer hidden"
role="switch"
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"relative h-6 w-10",
"after:absolute after:left-0.5 after:top-0.5",
"after:h-5 after:w-5",
// Styling
"rounded-full bg-neutral-200",
"after:rounded-full after:bg-muted-foreground",
"after:content-['']",
// States
"after:transition-all",
"peer-checked:bg-primary",
"peer-checked:after:translate-x-[16px]",
"peer-checked:after:bg-secondary",
"peer-disabled:opacity-50",
"peer-disabled:cursor-not-allowed",
// Custom
props.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/pkg/components"
templ ToggleForm() {
<div class="w-full max-w-sm">
@components.FormItem(components.FormItemProps{}) {
@components.FormLabel(components.FormLabelProps{
Text: "Connectivity Settings",
})
@components.FormItemFlex(components.FormItemProps{}) {
@components.Toggle(components.ToggleProps{
ID: "airplane-mode",
Name: "airplane",
})
@components.FormLabel(components.FormLabelProps{
For: "airplane-mode",
Text: "Airplane Mode",
})
}
@components.FormItemFlex(components.FormItemProps{}) {
@components.Toggle(components.ToggleProps{
ID: "wifi-mode",
Name: "wifi",
Disabled: true,
})
@components.FormLabel(components.FormLabelProps{
For: "wifi-mode",
Text: "WiFi (Not Available)",
})
}
@components.FormItemFlex(components.FormItemProps{}) {
@components.Toggle(components.ToggleProps{
ID: "bluetooth-mode",
Name: "bluetooth",
Checked: true,
})
@components.FormLabel(components.FormLabelProps{
For: "bluetooth-mode",
Text: "Bluetooth",
})
}
@components.FormDescription(components.FormDescriptionProps{}) {
Manage your device's connectivity options.
}
@components.FormMessage(components.FormMessageProps{
Type: "error",
Message: "Please configure your connectivity settings.",
})
}
</div>
}
package components
import "github.com/axzilla/templui/pkg/utils"
type ToggleProps struct {
ID string // DOM identifier
Name string // Form field name
Disabled bool // Prevents interaction
Checked bool // Toggled state
Class string // Additional CSS classes
Attributes templ.Attributes // Additional HTML attributes
}
// Toggle renders a styled switch input
templ Toggle(props ToggleProps) {
if props.ID == "" {
{{ props.ID = utils.RandomID() }}
}
<label for={ props.ID } class="inline-flex cursor-pointer items-center gap-2">
<input
x-ref={ props.ID }
checked?={ props.Checked }
disabled?={ props.Disabled }
id={ props.ID }
type="checkbox"
name={ props.Name }
class="peer hidden"
role="switch"
{ props.Attributes... }
/>
<div
class={
utils.TwMerge(
// Layout
"relative h-6 w-10",
"after:absolute after:left-0.5 after:top-0.5",
"after:h-5 after:w-5",
// Styling
"rounded-full bg-neutral-200",
"after:rounded-full after:bg-muted-foreground",
"after:content-['']",
// States
"after:transition-all",
"peer-checked:bg-primary",
"peer-checked:after:translate-x-[16px]",
"peer-checked:after:bg-secondary",
"peer-disabled:opacity-50",
"peer-disabled:cursor-not-allowed",
// Custom
props.Class,
),
}
aria-hidden="true"
></div>
</label>
}