Toggle

Purpose

The Toggle is a styled HTML button which allows the user to switch between two pre-defined options.

import Toggle from '@wedgekit/toggle';

const Example = () => {
  const [value, setValue] = React.useState(1);

  return (
    <Toggle
      options={[
        { label: 'One', value: 1 },
        { label: 'Two', value: 2 },
      ]}
      value={value}
      onChange={setValue}
    />
  );
};

render(<Example />);

Props

options

Type: [{ label: string, value: unknown}, { label: string, value: unknown}]

Required: ✅

A tuple representing the two toggle possibilities. The label is what will be displayed on the toggle button to the user. The value is used internally to determine which option is selected. It is typically a string but can be anything. Label and value can be the same value if desired.

value

Type: any

Required: ✅

The selected value for the toggle. It must correspond to one of the values of the options tuple.

onChange

Type: (value: any) => void

Required: ✅

The callback when the toggle is clicked. It will pass the value of the new option.

Further Reading

• More advanced use cases documentation can be found here