Toggle ​

Toggle component is used to enable users to switch between two states.

Usage ​

<j-toggle>Checked</j-toggle>
<script>
  const toggle = document.querySelector("j-toggle");
  toggle.addEventListener("change", (e) => {
    console.log(e.target.checked);
  });
</script>

export default function Toggle() {
  const [checked, setChecked] = useState(false);

  return (
    <j-toggle
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    ></j-toggle>
  );
}

<template>
  <j-toggle
    :checked="checked"
    @change="(e) => (checked = e.target.checked)"
  ></j-toggle>
</template>

<script setup>
import { ref } from "vue";
const checked = ref(false);
</script>

Properties ​

Checked boolean ​

Use the checked property to set the state of the toggle. When the value is set to true, the toggle will be in the "on" state.

<j-toggle checked>Checked</j-toggle>

Disabled boolean ​

Use the disabled property to disable the toggle. When the toggle is disabled, it cannot be clicked or focused.

<j-toggle disabled>Disabled</j-toggle>

Full boolean ​

Use the full property to make the toggle take up the full width of its container.

<j-toggle full>Full</j-toggle>

Size string ​

Use the size property to change the size of the toggle. You can set the value to sm, md, or lg.

<j-toggle size="sm">Small</j-toggle>
<j-toggle size="md">Medium</j-toggle>
<j-toggle size="lg">Large</j-toggle>

Value any ​

Use the value property to set the value of the toggle. This value will be used when the form containing the toggle is submitted.

<j-toggle value="toggle-value">Value</j-toggle>

Events ​

Change ​

The change event is fired when the toggle is clicked and its state changes. You can add an event listener to the toggle element to handle this event, like so:

const toggle = document.querySelector("j-toggle");
toggle.addEventListener("change", () => {
  // Do something when the toggle state changes
});

Slots ​

This component doesn't have any slots available.