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