# @lightspeed/cirrus-input

> Cirrus Input Component

Latest version **8.2.1** (published 2019-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lightspeed/cirrus-input
pnpm add @lightspeed/cirrus-input
yarn add @lightspeed/cirrus-input
bun add @lightspeed/cirrus-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.2.1 |
| Published | 2019-02-26 |
| First published | 2017-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lightspeed |
| Maintainers | ahmedelgabri, anomen, inooid, kshahani, kurt.bergeron, lightspeedhq, ls-frederic-bouchard, ls-guillaume-lambert, tombertrand, x.drdak |

## Links

- npm: https://www.npmjs.com/package/@lightspeed/cirrus-input
- npm.io page: https://npm.io/package/@lightspeed/cirrus-input

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [@lightspeed/cirrus-icon](https://npm.io/package/@lightspeed/cirrus-icon.md) ^7.3.0
- [@lightspeed/cirrus-text](https://npm.io/package/@lightspeed/cirrus-text.md) ^4.0.0

## Recent versions

- 8.2.1 (latest) — 2019-02-26
- 9.0.0-beta.1 — 2018-12-03
- 9.0.0-beta.0 — 2018-12-03
- 9.0.0-alpha.1 — 2018-11-29
- 9.0.0-alpha.0 — 2018-11-27
- 8.2.0 — 2018-11-12
- 8.1.0 — 2018-11-08
- 8.0.2 — 2018-10-30
- 8.0.1 — 2018-10-29
- 8.0.0 — 2018-10-15
- 7.0.1 — 2018-09-06
- 7.0.0 — 2018-08-28
- 6.0.0 — 2018-08-27
- 5.0.4 — 2018-08-03
- 5.0.3 — 2018-07-17
- … 28 more at https://npm.io/package/@lightspeed/cirrus-input/versions

## README

# 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](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-input
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-input
```

## Usage

Import required styles in your `.scss`:

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

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

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

---
_Source: https://npm.io/package/@lightspeed/cirrus-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._