@chameleon-ds/input
@chameleon-ds/input
npm i @chameleon-ds/input
@chameleon-ds/input

@chameleon-ds/input

Chameleon Web Components - A collection of lightweight, unidirectional, framework-agnostic elements based on the Chameleon Design System

by MaritzSTL

2.0.1 (see all)License:MITTypeScript:Not Found
npm i @chameleon-ds/input
Readme

Chameleon Input

import { html, svg } from "lit-html";
import {
  withKnobs,
  text,
  number,
  boolean,
  radios,
} from "@open-wc/demoing-storybook";
import "./chameleon-input.js";

const searchIcon = (slot) => svg`
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="feather feather-search"
    slot="${slot}"
  >
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
`;

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

Properties

Property NameType(s)Default ValueDescription
autocompleteBooleanfalseA string indicating the type of autocomplete functionality, if any, to allow on the input
nameString"cha-input"The input's form name
autofocusBooleanfalseA Boolean which, if present, makes the input take focus when the form is presented
disabledBooleanfalseA Boolean attribute which is present if the input should be disabled
noStepperBooleanfalseA Boolean attribute which, if true, indicates that the input with number type will not display increment arrows
stepNumbernullThe input's number interval (available in type="number")
readonlyBooleanfalseA Boolean attribute which, if true, indicates that the input cannot be edited
requiredBooleanfalseA Boolean which, if true, indicates that the input must have a value before the form can be submitted
toggleableBooleanfalseA Boolean which, if present and the input type is 'password', allows visibility of password characters to be toggled
touchedBooleanfalseA Boolean which, if true, indicates that the input field has had a blur event
typeString"text"A string indicating which input type the <input> element represents
placeholderString""The input's placeholder value
valueString""The input's current value
minNumbernullThe input's min value (available in type="number")
maxNumbernullThe input's max value (available in type="number")
maxLengthNumbernullThe input's max length (availabile in all types expect type="number")
labelString""The input's label text
invalidBooleanfalseInvalid boolean to allow validity access from higher level form errors
validationMessageString""The input's error message
icon-leftBooleanfalseElement has a left icon
icon-rightBooleanfalseElement has a right icon

Examples

Default

export const Default = () => {
  const name = text("Name", "input-form-name");
  const disabled = boolean("Disabled", false);
  const readonly = boolean("Read Only", false);
  const toggleable = boolean("Toggleable password visibility", false);
  const label = text("Label", "Name");
  const invalid = boolean("Invalid", false);

  const error = text("Error", "");
  const placeholder = text("Placeholder", "Text...");
  const required = boolean("Required", false);
  const step = number("Step", 0.01);
  const noStepper = boolean(
    "Hide increment arrows/disable incrementing",
    false
  );
  const typeOptions = {
    Text: "text",
    Password: "password",
    Email: "email",
    Number: "number",
    Search: "search",
    Tel: "tel",
    Url: "url",
  };
  const defaultThemeValue = "text";
  const typeSelection = radios("Type", typeOptions, defaultThemeValue);

  return html`
    <chameleon-input
      name="${name}"
      ?required="${required}"
      ?disabled="${disabled}"
      ?readonly="${readonly}"
      ?invalid="${invalid}"
      ?noStepper="${noStepper}"
      ?toggleable="${toggleable}"
      .type="${typeSelection}"
      .placeholder="${placeholder}"
      .label="${label}"
      .validationMessage="${error}"
      .step="${step}"
    ></chameleon-input>
  `;
};

Icon Left

export const IconLeft = () => html`
  <chameleon-input label="Search" icon-left>
    ${searchIcon("icon-left")}
  </chameleon-input>
`;

Icon Right

export const IconRight = () => html`
  <chameleon-input label="Search" icon-right>
    ${searchIcon("icon-right")}
  </chameleon-input>
`;

Error State

export const ErrorState = () => html`
  <chameleon-input
    label="Search *"
    validationMessage="Field must not be empty"
    invalid="true"
    icon-right
  >
    ${searchIcon("icon-right")}
  </chameleon-input>
`;

Downloads/wk

6

GitHub Stars

24

LAST COMMIT

2yrs ago

MAINTAINERS

6

CONTRIBUTORS

26

OPEN ISSUES

38

OPEN PRs

9
VersionTagPublished
2.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate