Toggle

Component that allows users to switch between two different states, typically representing an on/off or true/false choice.

Overview

This example renders a basic Toggle component in the "on" state. When the toggle state changes, the onChange function is called and the new checked state is logged to the console.

Example: Toggle

  import { Toggle } from '@skiff-org/skiff-ui';
  const [checked, setChecked] = useState(false);

  <Toggle
    checked={checked}
    onChange={() => setChecked(!checked)}
  />

Properties

  • Name
    checked
    Type
    boolean
    Description

    Set the value of the toggle to be "on".

  • Name
    disabled
    Type
    boolean
    Description

    Disable interactions on the toggle.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

    Force the theme (dark or light mode) of the toggle component, regardless of app theme.

  • Name
    size
    Type
    ToggleSize
    Description

    Size of the toggle component.

  • Name
    onChange
    Type
    () => void
    Description

    Function called onChange event when the toggle is set "on"/"off".

Types

  type ToggleSize = Size.SMALL | Size.MEDIUM;