Components
Controls
Toggle

Toggle

Toggle

Expand code

Editable Example

import { Toggle } from "@wfp/react";

() => {
  return (
    <Toggle
      defaultToggled
      labelA="Off"
      labelB="On"
      name="togglename"
    />
  );
};
PropDefaultDescriptionValue

defaultToggled

boolean
–

Specify whether the toggle should be on by default

toggled

boolean
–

Use this to make the component controlled. If toggled is passed, the component will not manage its own state.

disabled

boolean
–

labelA

string
–

Specify the label for the "off" position

labelB

string
–

Specify the label for the "on" position

onToggle

(value: boolean,htmlFor: string,event: ChangeEvent<HTMLInputElement>) => void
–

A callback function that is called when the toggle is clicked. It receives the new boolean state, the input's ID, and the original event. This is the recommended handler for new implementations.

className

string
–

id

string
–

Provide an id that unique represents the underlying input

name

string
–

Provide an name that unique represents the underlying input

onChange

(event: ChangeEvent<HTMLInputElement>) => void
–

Provide a function that is called when a change event occurs on the control

ref

any
–

On this page