Skip to content
On this page

Toggle

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

Usage

Checked
html
<j-toggle>Checked</j-toggle>
<script>
  const toggle = document.querySelector("j-toggle");
  toggle.addEventListener("change", (e) => {
    console.log(e.target.checked);
  });
</script>
js
export default function Toggle() {
  const [checked, setChecked] = useState(false);

  return (
    <j-toggle
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    ></j-toggle>
  );
}
vue
<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.

Checked
html
<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.

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

Full boolean

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

Full
html
<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.

SmallMediumLarge
html
<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.

Value
html
<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:

js
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.