Switch

A switch is an input component that allows users to choose one of two values: checked or unchecked.

      
  
  
    
  


    

      <Input.switch
  :let={api}
  on_checked={JS.set_attribute({"data-dark", "true"}, to: "#code-example-#{@id}")}
  on_unchecked={JS.remove_attribute("data-dark", to: "#code-example-#{@id}")}
>
  <button
    class={[
      "relative inline-flex flex-shrink-0 items-center h-[24px] w-[44px]",
      "bg-gray-100 group-data-[dark]:bg-slate-700 rounded-full",
      "ring-1 ring-inset ring-gray-100 group-data-[dark]:ring-white/10",
      "cursor-pointer transition duration-200 ease-in-out"
    ]}
    {api.track_attrs}
  >
    <span class="sr-only">theme toggle</span>
    <span
      class={[
        "inline-flex justify-center items-center pointer-events-none h-[22px] w-[22px]",
        "bg-white group-data-[dark]:bg-slate-800 rounded-full shadow-lg ring-0",
        "transform transition duration-200 ease-in-out ui-checked:translate-x-5"
      ]}
      {api.thumb_attrs}
    >
      <Heroicons.sun mini class="ui-checked:hidden w-3 h-3 text-gray-500" />
      <Heroicons.moon mini class="ui-unchecked:hidden w-3 h-3 text-gray-300" />
    </span>
  </button>
</Input.switch>

    

      
    

Setup

To use the switch component, you’ll have to import Switch module in your assets/app.js.

import { createSproutConfig, Switch } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Switch()],
});

Anatomy

<sp-switch data-state="checked | unchecked">
  <button data-part="track">
    <span data-part="thumb"></span>
  </button>
</sp-switch>

track: the track for the thumb
thumb: the thumb used to indicate whether the switch is checked or not

Under the hood, all the slot contents are rendered inside a sp-switch custom element.

Attributes

Attribute	Type	Description
`checked`	`:boolean`	Whether the switch is checked by default, default to `false`
`on_checked`	`JS`	JS commands executed when the switch is checked
`on_unchecked`	`JS`	JS commands executed when the switch is unchecked
`rest`	`:global`	Global attributes to be passed to the `sp-switch` element

API

API	Description
`track_attrs`	Attributes to be passed to the track part
`thumb_attrs`	Attributes to be passed to the thumb part