## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Switch Category: forms Description: Toggle Switch ## Small Variant ### SenangStart CSS Code ```html <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:small font:tw-medium text:gray-900">Toggle S</span> </label> ``` ### Tailwind CSS Code ```html <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-sm font-medium text-gray-900">Toggle S</span> </label> ``` ## Medium Variant ### SenangStart CSS Code ```html <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:base font:tw-medium text:gray-900">Toggle M</span> </label> ``` ### Tailwind CSS Code ```html <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-base font-medium text-gray-900">Toggle M</span> </label> ``` ## Large Variant ### SenangStart CSS Code ```html <label layout="relative inline-flex items:center" visual="cursor:pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div> <span space="m-l:small-3x" visual="text-size:large font:tw-medium text:gray-900">Toggle L</span> </label> ``` ### Tailwind CSS Code ```html <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" value="" class="sr-only peer"> <div class="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-blue-600"></div> <span class="ml-3 text-lg font-medium text-gray-900">Toggle L</span> </label> ```