@chameleon-ds/switch

Chameleon switch

Usage no npm install needed!

<script type="module">
  import chameleonDsSwitch from 'https://cdn.skypack.dev/@chameleon-ds/switch';
</script>

README

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>
  `;
};