Skip to main content

Input

Component
Live

The Input component allows users to enter a single-line of text.

FigmaCode

Usage​

Inputs allow users to enter text information within a single line. Help text and placeholder text can be used to provide the user with additional context and guidance. Inputs are also available in full width plus 4 pre-defined sizes.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Input } from "@iag/chroma-react-ui.components";

When to use​

Use an Input when you need to capture single-line text from a user.

When to avoid​

Avoid using an Input for text content that is likely to require more than one line of data entry, instead consider the Textarea component. Also avoid if the input can be selected rather than typed. In this case consider the Radio or Select components.

Do

  • Do use placeholders to guide users on input expectations and format.
  • Do provide help text for additional context or prompts.
  • Do use informative error messages for easier correction.

Sizes​

The Input component is resizable, defaulting to full width. It includes four sizes (1-4), with 1 being the smallest and 4 the largest.