UI Elements

Toggle

A switch control for binary on/off or true/false states.

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<span class="whole" conditional>
  <span class="left" conditional>{left}</span>
  <button class="main" aria-pressed={value} aria-label={ariaLabel} {role} {...attributes} bind:this={element} use:action>
    {children}
  </button>
  <span class="right" conditional>{right}</span>
</span>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface ToggleProps {
  children: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  left?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  right?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  value?: boolean; // bindable (false)
  role?: "button" | "switch"; // ("button")
  ariaLabel?: string;
  attributes?: HTMLButtonAttributes;
  action?: Action;
  element?: HTMLButtonElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Styling

To learn more, see Styling.

Variant Management

When value is true, the active variant is applied; otherwise, neutral is applied. If the variant prop is specified, the specified value is used instead of neutral.

Default Class Name

svs-toggle

Exports

Types

TypeScript
type ToggleReqdProps = "children";
type ToggleBindProps = "value" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo
Enter variant as you like
Activate