Toggle

The Toggle component in Electrik Slate UI is a form element that allows users to switch between two states, such as on/off or true/false. It supports customization through props, integrates seamlessly with dark mode, and includes validation error messages.

This example demonstrates a basic toggle input with a label:

<!-- Basic Toggle Input -->
<x-slate::toggle name="exampleToggle" label="Enable Feature" />

This example demonstrates a toggle input that is checked by default:

<!-- Checked Toggle Input -->
<x-slate::toggle name="checkedToggle" label="Enable Feature" checked />

This example demonstrates a toggle input that is disabled:

<!-- Disabled Toggle Input -->
<x-slate::toggle name="disabledToggle" label="Enable Feature" disabled />

This example demonstrates how to display an error message below the toggle input:

<!-- Toggle Input with Error Message -->
<x-slate::toggle 
    name="errorToggle" 
    label="Enable Feature" 
    error="This field is required." 
/>

This example demonstrates how to display additional help text below the label:

<!-- Toggle Input with Help Text -->
<x-slate::toggle 
    name="helpToggle" 
    label="Enable Feature" 
    helpText="This is additional information about the toggle." 
/>

This example demonstrates how the toggle input adapts to dark mode:

<!-- Toggle Input in Dark Mode -->
<div class="dark">
    <x-slate::toggle name="darkModeToggle" label="Enable Feature" />
</div>

This example demonstrates a toggle with custom size and color:

<!-- Custom Toggle Size and Color -->
<x-slate::toggle name="customToggle" label="Enable Feature" size="lg" color="blue" />

The Toggle component is flexible and easy to customize. It supports various states such as checked, disabled, and error. The Toggle component's dark mode support ensures that it maintains readability across different themes.