Skip to content
JTJS

Toggle

Component | Source Code

extends Omit<ComponentPropsWithRef<“span”>, “children” | “onToggle”>

Props Inheritance Hierarchy: Omit<ComponentPropsWithRef<“span”>, “children” | “onToggle”>

A control that can be interacted with to switch between being on and off.

Can be controlled or uncontrolled. If you intend to control the component, you must provide a isOn that’s not undefined and it must be a boolean.

Note that because a Toggle has no backing element in HTML, you must style this element for it to have any appearance. @jtjs/theme library contains default styling for Toggles you can use as a base.

If you’d like to style the component yourself, the structure of the resolved markup is:

.jtjs-toggle.jtjs-toggle-{on/off}
  .jtjs-toggle-knob

Properties

Section titled “Properties”

defaultIsOn?: boolean

Section titled “defaultIsOn?: boolean”

disabled?: boolean

Section titled “disabled?: boolean”

Whether the toggle is disabled.

isOn?: boolean

Section titled “isOn?: boolean”

Whether the toggle is currently on.

onToggle?: Function

Section titled “onToggle?: Function”

Handler for when the user tries to change whether the toggle is on.