@chameleon-ds/radio

Chameleon radio

Usage no npm install needed!

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

README

Chameleon Radio

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

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

Properties

Property Name Type(s) Default Value Description
label String "" The radio's label
name String "cha-radio" The radio's form name
checked Boolean false A Boolean which, if true, indicates that the radio is selected
value String "" The radio's current value
disabled Boolean false A Boolean to disable radio button
readonly Boolean false A Boolean attribute which, if true, indicates that the radio button cannot be edited
invalid Boolean false Invalid boolean to allow validity access from higher level form errors

Examples

Default

export const Default = () => {
  const label = text("Label", "");
  const checked = boolean("Checked", true);
  const disabled = boolean("Disabled", false);
  const invalid = boolean("Invalid", false);

  return html`
    <chameleon-radio
      label="${label}"
      ?checked="${checked}"
      ?disabled="${disabled}"
      ?invalid="${invalid}"
    ></chameleon-radio>
  `;
};