Toggle

Fully customizable switch that can replace traditional checkboxes and radio buttons.

About

The Toggle component provides a modern and user-friendly way to handle Boolean inputs in forms. It supports labels, customizable styling, and works seamlessly with checkboxes and radio button types. The component is fully accessible and integrates well with different UI requirements.

Example

The Toggle component can be used in various ways depending on your needs. Below is a basic example:

Svelte 
<script>
  import { Toggle } from "theui-svelte";
</script>

<Toggle name="toggle">Enable Feature</Toggle>

You can use it in forms, settings panels, or anywhere a simple on/off switch is required. The component adapts well to different themes and sizes, making it versatile for various UI designs.

Toggle Type

The type prop defines whether the toggle functions as a checkbox or a radio button.

Checkboxes

Radio buttons

Svelte 
<!-- Checkbox (default) -->
<Toggle name="toggle1" type="checkbox">Checkbox 1</Toggle>
<Toggle name="toggle2" type="checkbox">Checkbox 2</Toggle>

<!-- Radio buttons -->
<Toggle name="toggle3" type="radio">Radio button 1</Toggle>
<Toggle name="toggle3" type="radio">Radio button 2</Toggle>

Name and Value

The name and value props are crucial for form handling, especially when using the Toggle component as a checkbox or radio button.

  • The name prop is required for radio buttons to group multiple toggles under the same name, allowing only one to be selected at a time.
  • The value prop controls the toggle's state and can be true, false, or null. When used as a radio button, the value represents the selected option.
Svelte 
<!-- Toggle with custom ID -->
<Toggle name="preferences" type="checkbox" value="ok">Enable Notifications</Toggle>
<Toggle name="theme" type="radio" value="dark">Dark Mode</Toggle>

Toggle Sizes

The size prop controls the dimensions of the toggle switch, allowing it to fit various UI designs. Whether you need a compact switch for minimal layouts or a larger one for better accessibility, the size prop provides flexibility. Available sizes are: sm, md (default), lg and xl.

Svelte 
<Toggle name="toggle" size="sm">Small (sm) toggle</Toggle>
<Toggle name="toggle" size="md">Medium (md) toggle</Toggle>
<Toggle name="toggle" size="lg">Large (lg) toggle</Toggle>
<Toggle name="toggle" size="xl">Extra large (xl) toggle</Toggle>

Animation

The animateSpeed prop controls the transition effect when toggling between states. Smooth animations enhance the user experience by making interactions feel more natural. Available values are: slower, slow, normal (default), fast and faster.

Svelte 
<Toggle name="toggle" animateSpeed="slower">Slower animation</Toggle>
<Toggle name="toggle" animateSpeed="slow">Slow animation</Toggle>
<Toggle name="toggle" animateSpeed="normal">Normal animation</Toggle>
<Toggle name="toggle" animateSpeed="fast">Fast animation</Toggle>
<Toggle name="toggle" animateSpeed="faster">Faster animation</Toggle>
<Toggle name="toggle" animateSpeed="none">No animation</Toggle>

Rounded Toggle

The rounded prop defines the shape of the toggle’s switch and background. By adjusting this property, you can make the toggle appear more circular or squared. Available values are: sm, md, lg, xl, full (default) and none.

Svelte 
<Toggle name="toggle" label="Small rounded" size="xl" rounded="sm" />
<Toggle name="toggle" label="Medium rounded" size="xl" rounded="md" />
<Toggle name="toggle" label="Large rounded" size="xl" rounded="lg" />
<Toggle name="toggle" label="Extra large rounded" size="xl" rounded="xl" />
<Toggle name="toggle" label="Full rounded" size="xl" rounded="full" />
<Toggle name="toggle" label="Not rounded" size="xl" rounded="none" />

Customization

The Toggle component offers flexibility in styling through the labelClasses, wrapperClasses, and class props, allowing you to adjust the appearance of both the label and the toggle’s outer container.

class
The class attribute can be used to apply custom styles directly to the toggle input. This gives you full control over its appearance, making it easy to align with your design system.

wrapperClasses
The wrapperClasses prop lets you apply custom styles to the main wrapper <div>. By default, it is an empty string, meaning no additional styles are applied unless specified.

labelClasses
The labelClasses prop is primarily inherited from the parent Form component (if available), ensuring consistent styling across form elements. However, you can override it to apply custom styles to the label as needed.

Svelte 
<Toggle
  labelClasses="text-red-500 font-bold"
  wrapperClasses="shadow-xl py-2 px-4 bg-gray-100 dark:bg-gray-800 rounded-full"
  class="bg-blue-200 checked:hover:bg-green-500 checked:focus:bg-green-500 checked:bg-green-500 focus:!ring-gray-500 checked:focus:!ring-green-500"
>
  CUSTOM TOGGLE
</Toggle>

Accessibility

The Toggle component is more than just good looks — it's smart, too. With built-in role="switch" and dynamic aria-checked, screen readers instantly know whether it's on or off. Whether you're using it as a checkbox or a radio button, it adapts and communicates its state clearly. The linked label and responsive design ensure a smooth, accessible toggle every time.

Configuration