@chameleon-ds/switch

Chameleon Switch

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, text, boolean } from "@open-wc/demoing-storybook";
import "./chameleon-switch.js";

export default {
  title: "Components|Form Elements/Switch",
  component: "chameleon-switch",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name	Type(s)	Default Value	Description
label	String	""	The switch's label
checked	Boolean	false	If the switch is checked
readonly	Boolean	false	If the switch's value is readonly
value	String	""	The switch's current value

Examples

Default

export const Default = () => {
  const label = text("Label", "");
  const checked = boolean("Checked", true);
  const readonly = boolean("Read Only", false);

  return html`
    <chameleon-switch
      label="${label}"
      ?checked="${checked}"
      ?readonly="${readonly}"
    ></chameleon-switch>
  `;
};