Toggle

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

Usage

Use standalone.

Svelte

<Toggle {...props} />

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" {...rest} {role} aria-pressed aria-checked aria-label={ariaLabel} bind:this={element} {@attach attach}>
    {children} conditional
  </button>
  <span class="right" conditional>{right}</span>
</span>

Props

Name	Type	Default	Description
`children`	`Snippet`	-	Toggle content; receives value, variant, and button element
`left`	`Snippet`	-	Content before the button; receives value, variant, and button element
`right`	`Snippet`	-	Content after the button; receives value, variant, and button element
`value`	`boolean`	`false`	Bindable pressed state
`role`	`<enum>`	`"button"`	ARIA role, either button or switch
`ariaLabel`	`string`	-	Accessible label for icon-only or text-less toggles
`attach`	`Attachment`	-	Svelte attachment on the button
`element`	`HTMLButtonElement`	-	Bindable button element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Bindable variant

Other HTMLButtonAttributes are passed to <button> via rest props; class is merged onto the control.

For an icon-only or text-less toggle, provide ariaLabel so the button has an accessible label.

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

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Wrapper (whole <span>, when left or right is rendered): role="group".
Toggle button (main <button>): aria-pressed reflecting value when using the default button role; when role="switch", role="switch" and aria-checked reflecting value; aria-label from ariaLabel when supplied.

Provide an accessible name yourself for an icon-only or text-less toggle. Pass ariaLabel, or pass a name through the button rest props such as aria-labelledby.

Standards Basis

Toggle is built on a native <button>, so keyboard and assistive-technology support follows the browser standard for button controls. See the Concepts standards-first guidance for the library's approach.

Exports

Types

TypeScript

interface ToggleProps extends Omit<
  HTMLButtonAttributes,
  "children" | "value" | "type" | "role" | "aria-pressed" | "aria-checked" | "aria-label"
> {
  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;
  attach?: Attachment<HTMLButtonElement>;
  element?: HTMLButtonElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
  // other HTMLButtonAttributes are passed to <button> via ...rest; `class` is merged onto the button
}
type ToggleReqdProps = never;
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

Free Input

Enter variant as you like

Activate