Switch

A Switch lets users toggle between two states, such as on and off. It is typically used for settings or preferences and gives immediate visual feedback.

Usage

import { Switch } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [checked, setChecked] = useState(false);
  return <Switch checked={checked} onChange={(next) => setChecked(next)} />;
}

Props

checked

Typeboolean

Whether the switch is checked or not

className

Typestring

Custom class name for the switch component

disabled

Typeboolean

Whether the switch is disabled

onChange

Type(checked: boolean, event: Event) => void

Callback function when the switch state changes

size

TypeSelectorSize

Default'medium'

Size of the switch component

thumbChildren

TypeReact.ReactNode

Custom content for the thumb of the switch

trackChildren

TypeReact.ReactNode

Custom content for the track of the switch

CSS variables

Color

--wb-public-switch-outline-color

--wb-public-switch-disabled-background-color

--wb-public-switch-disabled-border-color

--wb-public-track-no-selected-color

--wb-public-track-selected-color

--wb-public-thumb-no-selected-color

--wb-public-thumb-disabled-color

--wb-public-thumb-selected-color

--wb-public-switch-focus-border-color

Size

--wb-public-switch-width-medium

--wb-public-switch-height-medium

--wb-public-switch-thumb-padding-medium

--wb-public-switch-width-small

--wb-public-switch-height-small

--wb-public-switch-thumb-padding-small

--wb-public-switch-width-extra-small

--wb-public-switch-height-extra-small

--wb-public-switch-thumb-padding-extra-small

--wb-public-switch-border-size

Icon switch

IconSwitch is a Switch variant that swaps a track icon and a thumb icon based on the checked state, for representing on/off states with icons instead of a bare thumb.

Usage

import { Moon, Sun } from '@phosphor-icons/react';
import { IconSwitch } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [checked, setChecked] = useState(false);
  return <IconSwitch checked={checked} icon={<Sun />} IconChecked={<Moon />} onChange={(next) => setChecked(next)} />;
}

Props

IconCheckedrequired

TypeReactNode

checked

Typeboolean

Whether the switch is checked or not

className

Typestring

Custom class name for the switch component

disabled

Typeboolean

Whether the switch is disabled

icon

TypeReact.ReactNode

Icon the component shows; `IconSwitch` shows it in the off state.

onChange

Type(checked: boolean, event: Event) => void

Callback function when the switch state changes

size

TypeSelectorSize

Default'medium'

Size of the switch component

thumbChildren

TypeReact.ReactNode

Custom content for the thumb of the switch

trackChildren

TypeReact.ReactNode

Custom content for the track of the switch

variant

TypeIconSwitchVariant

Default'primary'

CSS variables

Color

--wb-public-icon-switch-track-bg

--wb-public-icon-switch-thumb-bg-primary

--wb-public-icon-switch-icon-color

--wb-public-icon-switch-icon-selected-color

--wb-public-icon-switch-thumb-bg-secondary

Size

--wb-public-icon-switch-width

--wb-public-icon-switch-height

--wb-public-icon-switch-thumb-size

--wb-public-icon-switch-thumb-offset

--wb-public-icon-switch-translate

--wb-public-icon-switch-padding

--wb-public-icon-switch-icon-size