@lightspeed/cirrus-input

Input

The most generic form of them all is the input form. The input enables our users to fill in their data or content within our software. Each input can have an input Label, description, a required mark & a regular label. Input component includes a wide variety of options to quickly create accessible forms.

---

States

Input comes in more states than any other component, each for its own scenario. In this section, you’ll find a small description and scenario about each one.

State	Description
Normal	This is the default state of each form.
Entered	When the user has given input on the form.
Focused	When the user has the form selected.
Typing	The user is currently typing inside the form.
Disabled	Forms with a disabled state can’t be used.
Error	When the form has invalid content inside, note that each error state needs an error description as well.

---

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-input

Or using npm:

npm i -S @lightspeed/cirrus-input

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-input/Input.scss';

React Component

Props

Prop	Type	Description
id	string	Inputs ID, Recommended for accessibility
small	boolean	Display a small input
large	boolean	Display a large input
label	string	Input's label above the input
labelHelper	react.node	Label helper aligned to the right
description	string	Description above the input
prefix	react.node	Node inside the input aligned to the left
suffix	react.node	Node inside the input aligned to the right
textHelper	string	Help text below the input
disabled	boolean	Set the input in a disabled state
status	object	Sets the status of the input { type: 'valid|warning|error', message: String|Element }. The message will replace the textHelper
ref	function	A function that takes a DOM node as the argument and can return anything
html property	string	Any extra properties passed will be added to the <input> tag
className	string	Passed to the <input /> tag

Example

import React from 'react';
import Input from '@lightspeed/cirrus-input';

const handleChange = (event) => {
    console.log(event.target.value);
}

const MyComponent = () =>
  <div>
    <Input
      id="username"
      name="username"
      placeholder="Username"
      data-attribute="custom attribute"
      onChange={handleChange}
    />
  </div>;

export default MyComponent;

CSS Component

Add classes to your HTML elements:

Component classes

Besides the base class .cr-input you can use one of these classes

Type	Class
small	.cr-input--small
large	.cr-input--large
valid	.cr-input--valid
warning	.cr-input--warning
error	.cr-input--error

Component HTML

<div>
  <div class="cr-input__header">
    <div class="cr-input__label-wrapper">
      <label for="username" id="username-label" class="cr-text-base cr-text--body-small cr-text--bold">label</label>
      <div class="cr-input__label-helper">
        <span class="cr-label cr-label--info cr-label--small">label helper</span>
      </div>
    </div>
    <div id="username-description" class="cr-text-base cr-text--body-small">description text</div>
  </div>
  <div class="cr-input__wrapper">
    <div id="username-prefix" class="cr-input__prefix">prefix</div>
    <div id="username-suffix" class="cr-input__suffix">suffix</div>
    <input id="username" placeholder="Placeholder text..." aria-labelledby="username-label" aria-describedby="username-description" class="cr-input">
    <div class="cr-input__backdrop"></div>
  </div>
  <div class="cr-text-base cr-text--body-small cr-text--dimmed cr-input__text-helper">text helper</div>
</div>