Toggle Switch
premiumOn/off toggle switch with custom styling.
Overview
The Toggle Switch provides a visual on/off control. Stores a boolean value and includes a hidden input for native form submission compatibility.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
name | String | "enabled" | Field name used in form data. |
label | String | "Enable" | Label displayed next to the toggle. |
defaultChecked | Boolean | false | Whether the toggle starts in the on position. |
required | Boolean | false | When required, toggle must be on to submit. |
Features
- Smooth animated toggle transition
- Customizable track and thumb colors for on/off states
- Hidden <input> for native form submission
- Required validation (must be toggled on)
Tips
Use for boolean settings like "Subscribe to newsletter" or "Enable notifications."
For terms acceptance, use a Checkbox instead — it's the expected UX pattern.
Validation
This component uses checkbox validation. See the Validation Guide for details on configuring rules and error messages.