Switch

An <input type='checkbox'>: toggles between two states

Code

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

<Switch />

Members

Property Name	Type	Default	Comment
offText	string \| undefined	undefined	The text appearing by the off position. Not used when the offLabel slot is filled.
onText	string \| undefined	undefined	The text appearing near the on position. Not used when the onLabel slot is filled.
variant	string	''	Additional class names to apply
vertical	boolean	false	When true, the switch is displayed vertically.

Considerations

Includes HTMLInputElement props, event, and methods

Anatomy

<div class="sterling-switch">
   <!-- hidden input -->
  <input />
  <div class="off-label">
    <slot name="offLabel" {checked} {disabled} {inputId} {offText} {variant} {vertical} />
  </div>
  <div class="switch">
    <div class="thumb" />
  </div>
  <div class="on-label">
    <slot name="onLabel" {checked} {disabled} {inputId} {onText} {variant} {vertical}>
  </div>
</div>