- Components
- utilities
- switch
Preset Ui - Variants
A customizable, accessible switch using only CSS and a checkbox input.
Description
The PresetUI Switch component provides an accessible and styled switch that operates purely with CSS and a checkbox input, requiring no JavaScript.
Default Switch
Base Switch
- Class:
switch- The base class for the switch component.
Background
-
Default Background:
- To define the background color of the switch, add the class
bg-your-color, replacingyour-colorwith the desired color class.
- To define the background color of the switch, add the class
-
Checked Background Color:
- To apply a background color when the switch is checked, add the class
text-colorName. The background will adopt the text color when the switch is checked.
- To apply a background color when the switch is checked, add the class
Size
- Predefined Sizes:
- The switch component supports various sizes:
xs,sm,md,lg. - Example:
switch-xsfor an extra-small switch.
- The switch component supports various sizes:
Knob Color
- Custom Knob Color:
- To define the knob color, add the class
switch-knob-colorName. - In your CSS, set the color using variables like:
--switch-knob-colorName: value;.
- To define the knob color, add the class
Outline Switch
Base
- Class :
switch-outline
Size
- Predefined Sizes:
- The switch component supports various sizes:
xs,sm,md,lg. - Example:
switch-outline-xsfor an extra-small switch.
- The switch component supports various sizes: