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>