Switch

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Switch

The Switch is fundamentally the same element as the checkbox, but a better user experience for settings and preferences that a user should set.

Switch components also have a loading state, so they are a good option for togging a settings in a database without needing to click a save button.



Props


id string
The ID for the switch

disabled boolean false
If the switch is disabled or not

onclick, onselect, onchange function
Bubbles will treat all of these the same. Write the function you want to occur when the switch is clicked or toggled.

value boolean
The value of the switch is a boolean

Demo
The value of the switch is now: 
<script>
  import { Switch } from "bubbles-ui";
</script>

<Switch
  value={false}
  onclick={(event) => {
    const value = event.currentTarget.value;

    document.getElementById("switch-example").textContent = value;
  }}
/>
<div>
  The value of the switch is now:
  <span id="switch-example" />
</div>

LabeledSwitch

The LabeledSwitch is best used in a Form because it provides some attributes to explain what the switch is for.



Props


id string
If you're using this inside of the form, you'll want to include the id value, which will be the property value in JSON data when the form is submitted.

value boolean
If the component is checked or not.

label string
The label you want explaining what the checkbox is.

desc string
The option to add more text to explain the option the user is selecting in more detail. This element allows you to include html elements, so you can add an outbound link with an anchor tag.

error string An error occurred
The error text you want to show if this item fails validation.

validation string
The validation string you want to use for this form. See validateInputs for more information.

form_indent boolean true
Causes the elements to have spacing on the left and right to align it better with other elements in a form.

disabled boolean false
If the switch is disabled or not

onclick, onselect, onchange function
Bubbles will treat all of these the same. Write the function you want to occur when the switch is clicked or toggled.

background boolean true
Toggle a gray background around the element. This makes the element look in a form with other text and select input.

Demo

Marketing Notifications

We'll only send you notifications when something important happens.

 
<script>
  import { LabeledSwitch } from "bubbles-ui";
</script>

<LabeledSwitch
  label="Marketing Notifications"
  desc="We'll only send you notifications when something important happens."
  id="notifications.marketing"
  validation="boolean"
  value={true}
  onclick={(event) => {
    const value = event.currentTarget.value;
    const id = event.currentTarget.id;

    showLoading(id); //show the loading animation, perhaps for a network request

    //while loading the switch will be disabled

    setTimeout(() => {
      hideLoading(id); //stop the loading animation
    }, 2000);
  }}
/>