@chameleon-ds/select NPM

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

lit-element

@infinitebrahmanuniverse/nolb-_cham @everything-registry/sub-chunk-165 @chameleon-ds/timezone

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago