@chameleon-ds/radio

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