8.2.1 • Public • Published


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.


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.


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


Import required styles in your .scss:

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

React Component


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


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

const handleChange = (event) => {

const MyComponent = () =>
      data-attribute="custom attribute"

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 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 id="username-description" class="cr-text-base cr-text--body-small">description text</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 class="cr-text-base cr-text--body-small cr-text--dimmed cr-input__text-helper">text helper</div>




npm i @lightspeed/cirrus-input

DownloadsWeekly Downloads






Unpacked Size

30.2 kB

Total Files


Last publish


  • ls-rothlis
  • kurt.bergeron
  • tombertrand
  • lightspeedhq
  • ls-guillaume-lambert
  • inooid
  • ls-frederic-bouchard
  • anomen