@chameleon-ds/select

Chameleon select

Usage no npm install needed!

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

README

Chameleon Select

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

const options = [
  {
    value: "arch",
    label: "Gateway Arch",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/0/00/St_Louis_night_expblend_cropped.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "union-station",
    label: "Union Station",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/St._Louis_Union_Station_%2817577826564%29.jpg/320px-St._Louis_Union_Station_%2817577826564%29.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
  {
    value: "scott-joplin-house",
    label: "Scott Joplin House",
    subLabel: "Historical Landmark",
    preLabel: html`
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Scott_Joplin_House.jpg/568px-Scott_Joplin_House.jpg"
      />
    `,
    postLabel: "St. Louis, MO",
  },
];

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

Properties

Property Name Type(s) Default Value Description
name Boolean false The select's form name
options Array false An array of the possible options to be selected
filteredOptions Array false An array of filtered options
selectedOptions Array false An array of the selected options
active Boolean false A Boolean attribute which, if present, displays the filtered options
disabled Boolean false A Boolean attribute which is present if the input should be disabled
readonly Boolean false A Boolean attribute which, if true, indicates that the select cannot be edited
searchable Boolean false A Boolean attribute which, if true, select can be searched
invalid Boolean false A Boolean which, if true, indicates that the input is valid
label String false The input's label
placeholder String false The input's placeholder text
loading Boolean false Whether or not select is loading
validationMessage String false The select's error message

Examples

Default

export const Default = () => {
  const placeholder = text("Placeholder", "Please select an option");
  const label = text("Label", "Landmarks");
  const readonly = boolean("Read Only", false);
  const invalid = boolean("Invalid", false);
  const disabled = boolean("Disabled", false);
  const error = text("Error", "");

  return html`
    <chameleon-select
      .options="${options}"
      label="${label}"
      ?readonly="${readonly}"
      placeholder="${placeholder}"
      ?invalid="${invalid}"
      ?disabled="${disabled}"
      validationMessage="${error}"
    >
    </chameleon-select>
  `;
};

Error State

export const ErrorState = () => html`
  <chameleon-select
    label="Landmarks"
    ?invalid="${true}"
    validationMessage="Please select an option"
  >
  </chameleon-select>
`;