@purpurds/toggle v7.4.0

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as ToggleStories from "./src/toggle.stories"; import packageInfo from "./package.json";

Toggle

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

Examples

In MyComponent.tsx

Controlled.

For when you have to controll and use the state of the toggle.

import { Toggle } from "@purpurds/purpur";

export const MyComponent = () => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <div>
      <Toggle
        id="my-toggle"
        checked={isChecked}
        onChange={setIsChecked}
        label="My toggle"
        labelPosition="right"
      />
    </div>
  );
};

Uncontrolled

For when you don't have to controll state of the toggle, e.g. when in a form.

NOTE: do not use toggles instead of checkboxes or radio buttons!

import { Toggle } from "@purpurds/purpur";

export const MyComponent = () => {
  /**
   * Toggle will render checked, and handle it's state itself.
   *
   * Since it is rendered in a form, it will render a checkbox input under the hood
   * that will reflect its value and state.
   */
  return (
    <form>
      <Toggle id="my-toggle" defaultChecked label="My uncontrolled toggle" />
    </form>
  );
};

With custom label (not recommended).

Use the aria-labelledby property and pass the id of the label.

import { Toggle } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <label id="my-custom-label" htmlFor="my-toggle">
        Custom label
      </label>
      <Toggle aria-labeledby="my-custom-label" id="my-toggle" {...otherProps} />
    </div>
  );
};

Without label (not recommended).

If there should be no label at all, use the aria-label to label the toggle for screen readers.

import { Toggle } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <div>
      <Toggle aria-label="Toggle some awesome stuff!" id="my-toggle" {...otherProps} />
    </div>
  );
};