component

Switch

The Switch component provides a toggle switch, allowing users to switch between two states. It is useful for settings and options.

Source code in GitHub Switch in Storybook

Set Up #

Import the Switch component into your Svelte file:

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

Usage #

Here’s a simple example of how to implement the Switch component:

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is an switch
	<Switch />
</label>

Variant #

Switch has variant prop to decide the color theme of it.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is an switch
	<Switch variant="primary" defaultToggled={true} />
</label>
<label class="field">
	This is an switch
	<Switch variant="secondary" defaultToggled={true} />
</label>
<label class="field">
	This is an switch
	<Switch variant="success" defaultToggled={true} />
</label>
<label class="field">
	This is an switch
	<Switch variant="warning" defaultToggled={true} />
</label>
<label class="field">
	This is an switch
	<Switch variant="danger" defaultToggled={true} />
</label>

Size #

Adjust the size of the switch using the size prop.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is sm
	<Switch size="sm" defaultToggled={true} />
</label>
<label class="field">
	This is md
	<Switch size="md" defaultToggled={true} />
</label>
<label class="field">
	This is lg
	<Switch size="lg" defaultToggled={true} />
</label>

Default Toggled #

Use the defaultToggled prop to set the initial toggled state of the switch.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is a switch
	<Switch defaultToggled={true} />
</label>

Disabled #

The disabled prop makes the switch non-interactive.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is a switch
	<Switch disabled={true} />
</label>

Read Only #

The readonly prop makes the switch read-only, meaning it cannot be toggled.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is a switch
	<Switch readonly={true} />
</label>

Invalid #

Use the invalid prop to indicate that the switch’s state is invalid. The invalidText prop allows you to provide an error message.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is a switch
	<Switch invalid={true} invalidText="This is invalid text." />
</label>

Animation #

Control whether the switch has an animation with the animation prop.

Example.svelte
<script>
	import { Switch } from '@sans-ui/core';
</script>

<label class="field">
	This is a switch
	<Switch animation={false} invalidText="This is invalid text." />
</label>

Accessibility #

  • Built with a native HTML input element.
  • Full support for browser features like form autofill.
  • Keyboard focus management and cross browser normalization.
  • Keyboard event support for "Tab" and "Space" keys.
  • Labeling support for assistive technology.

API #

Switch provides APIs(Properties) that is necessary for you to configure a Switch compponent.

Switch Props #

Name Type Default Value
id string | undefined ""
textOnOn string ''
textOnOff string ''
label string ""
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' 'primary'
size 'sm' | 'md' | 'lg' 'md'
disabled boolean false
readonly boolean false
placeholder string ""
invalid boolean false
invalidText string ""
defaultToggled boolean false

Switch Handlers #

Name Type Description
on:toggle (toggled: boolean) => void When the switch is toggled. The switch's state is passed as an argument.
on:click (toggled: boolean, event: MouseEvent) => void When the switch is clicked. The switch's value is passed as an argument.

Switch Slots #

Name Description
base This slot is applied to the div element(switch component).
labelWrapper This slot is applied to the div element(wrapper) for the label element.
label This slot is applied to the label element.
inputWrapper This slot is applied to the div element(wrapper) for the input element(base).
startContent This slot is applied to the start-content icon wrapper element if you pass some content through `startContent` prop.
endContent This slot is applied to the end-content icon wrapper element if you pass some content through `endContent` prop.
<Spinner Textarea>