@purpurds/checkbox

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

import * as CheckboxStories from "./src/checkbox.stories"; import packageInfo from "./package.json";

Checkbox

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 checkbox.

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

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

Indeterminate.

When using the Indeterminate state, the toggle must be controlled.

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

export const MyComponent = () => {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <Checkbox
        id="my-checkbox"
        checked={checked}
        onChange={setChecked}
        label="My checkbox"
        labelPosition="right"
      />
      <Button
        variant="primary"
        onClick={() =>
          setChecked((prevChecked) => (prevChecked === "indeterminate" ? false : "indeterminate"))
        }
      >
        Toggle indeterminate
      </Button>
    </div>
  );
};

Uncontrolled

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

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

export const MyComponent = () => {
  /**
   * The checkbox 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 reflects its value and state.
   */
  return (
    <form>
      <Checkbox id="my-checkbox" defaultChecked label="My uncontrolled checkbox" />
    </form>
  );
};

With custom label (not recommended).

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

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

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

Without label (not recommended).

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

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

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