Toggle Switch

The Toggle Switch component allows users to choose between two states, such as on or off. It works like a checkbox but provides a more interactive and modern UI for boolean selections.

Props

Prop	Type	Default	Description
Type	string	'Default'	Visual style of the toggle. Options: Default, Slim
Size	string	'sm'	Size of the toggle. Options: sm, md.
disabled	boolean	false	When present, it specifies that the component should be disabled

Example component with all props

<ToggleSwitch type="Default" size="md" disabled />

Variants

Basic

Use the v-model property to enable two-way data binding with the ToggleSwitch. It keeps the toggle’s state in sync with your component’s data.

<ToggleSwitch size="sm" type="Default" />

Preselected State

Use the checked property to make the toggle active by default. When enabled, the toggle starts in the “on” position, indicating that the option is preselected.

<ToggleSwitch v-model="checked" />

Disabled State

Use the disabled state (disabled) to make the toggle inactive. It cannot be focused, clicked, or changed, and is typically used when an option is unavailable or controlled by other conditions.

Disabled toggle

<label class="toggle-withtext">
  <ToggleSwitch disabled />
  <span class="toggle-label">Disabled toggle</span>
</label>

Type

Default Type

Use the default (type="default") variant of the toggle switch for a standard and balanced design. Ideal for general use cases, it provides clear visibility while supporting labels and descriptions for better context.

<ToggleSwitch size="md" type="default" />

Slim Type

Use the slim (type="slim") variant of the toggle switch for a more minimal and sleek design. Perfect for modern layouts where a compact appearance is preferred, while still supporting labels and descriptions

<ToggleSwitch size="md" type="slim" />

Toggle with Text

Basic

Add a label and supporting text next to the toggle to provide context and description for the selection.

Remember meSave my login details for next time.

<label class="toggle-withtext" for="remember-toggle">
  <ToggleSwitch v-model="rememberMe" inputId="remember-toggle" />
  <div class="flex flex-col">
    <span class="toggle-text">Remember me</span>
    <span class="toggle-description">Save my login details for next time.</span>
  </div>
</label>

Preselection

You can display the toggle in an active state by default using the checked property. The toggle can also include a label and supporting text next to it for better context.

Remember meSave my login details for next time.

<label class="toggle-withtext" for="toggle-text">
  <ToggleSwitch v-model="checkedtext" inputId="toggle-text"  />
  <div class="flex flex-col">
    <span class="toggle-label">Remember me</span>
    <span class="toggle-supporting-text">Save my login details for next time.</span>
  </div>
</label>

Sizes

Small Size

Use the small (size="sm") variant of the toggle switch for compact layouts. Ideal when you need a space-saving option without compromising functionality.

Small sizes

<label class="toggle-withtext" for="size-sm">
  <ToggleSwitch v-model="small" inputId="size-sm" size="sm" />
  <span class="toggle-label">Small sizes</span>
</label>

Medium Size

Use the medium (size="md") variant of the toggle switch for a balanced and commonly used size. Perfect for standard forms and settings where default sizing fits best.

Default sizes

<label class="toggle-withtext" for="size-md">
  <ToggleSwitch v-model="medium" inputId="size-md" size="md" />
  <span class="toggle-label">Default sizes</span>
</label>