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

switch (<div>)
  hidden (<input>)
  off container (<div>)
    offLabel (string | Snippet)
  toggle (<div>)
    thumb (<div>)
  on container (<div>)
    onLabel (string | Snippet)