Switch

On/off toggle control with label, hint, and model binding.

<rhx-switch>

Examples

Basic

Dark mode

<rhx-switch name="darkMode"
             rhx-label="Dark mode" />

Pre-checked

Enable notifications

<rhx-switch name="notifications"
             rhx-label="Enable notifications"
             rhx-checked="true" />

With Hint

Auto-saveAutomatically save changes every 30 seconds

<rhx-switch name="autoSave"
             rhx-label="Auto-save"
             rhx-hint="Automatically save changes every 30 seconds" />

Sizes

Small switch

Medium switch (default)

Large switch

<rhx-switch name="sw-sm" rhx-label="Small switch" rhx-size="small" />
<rhx-switch name="sw-md" rhx-label="Medium switch (default)" />
<rhx-switch name="sw-lg" rhx-label="Large switch" rhx-size="large" />

States

Disabled switch

Disabled on

<rhx-switch name="sw-dis" rhx-label="Disabled switch"
             rhx-disabled="true" />
<rhx-switch name="sw-dis-on" rhx-label="Disabled on"
             rhx-disabled="true" rhx-checked="true" />

Model Binding

Dark Mode

<rhx-switch rhx-for="DarkMode"
             rhx-label="Dark Mode" />

htmx Integration

Email notificationsReceive email alerts for important updates

Toggle the switch...

<rhx-switch name="emailNotifications"
             rhx-label="Email notifications"
             rhx-hint="Receive email alerts for important updates"
             hx-post="/Docs/Components/Switch?handler=ToggleNotifications"
             hx-trigger="change"
             hx-target="#switch-result"
             hx-include="this" />
<div id="switch-result">Toggle the switch...</div>

Properties

Property	Type	Default	Description
`rhx-for`	`ModelExpression`	`-`	ASP.NET Core model expression for two-way binding
`name`	`string`	`-`	The form field name
`rhx-label`	`string`	`-`	Label text displayed next to the switch
`rhx-hint`	`string`	`-`	Hint text displayed below the label
`rhx-checked`	`bool`	`false`	Whether the switch is on
`rhx-size`	`string`	`medium`	Switch size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the switch is disabled