Switch

A toggle button between two states.

Code

<script lang="ts">
  import { Switch } from '@geoffcox/sterling-svelte';
</script>

<Switch offLabelText="Off" onLabelText="On" />

Members

Property Name	Type	Default	Comment
offLabel	string \| LabelSnippet \| undefined	undefined	The text or snippet to display for the off position.
onLabel	string \| LabelSnippet \| undefined	undefined	The text or snippet to display for the on position..
vertical	boolean \| null \| undefined	false	When true, the switch is displayed vertically.

Types

	Type Name	Definition	Comment
	LabelSnippet	Snippet<[{ checked: boolean \| null \| undefined; disabled: boolean \| null \| undefined; inputId: string; }]>

Considerations

Includes HTMLInputElement props, events, and methods.

Anatomy

<div class="sterling-switch">
  <input type="checkbox" />
  <div class="off-label">
    {@render offLabel()}
  </div>
  <div class="toggle">
    <div class="thumb"></div>
  </div>
  <div class="on-label">
    {@render onLabel()}
  </div>
</div>