Form input

Input is a versatile element that allows for the gathering of data from the user and the processing of this data within the system.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

Users can easily navigate to parent or child pages using the breadcrumb trail.

Principles

Use when

  1. information that needs to be manually collected from the user, such as contact names, customer addresses, or company addresses.
  2. specifying stock or price for a product or service.
  3. gathering login/sign up information from users during system access.
  4. for any input that can be collected using a text input field.

Don't use when

  1. input field is used solely for displaying data and does not require any user interaction.
  2. the content is static and does not need to be editable by the user.
input-structure

Structure

  1. Input label
  2. Icon
  3. Count value
  4. Text area
  5. Trailing icon
  6. Helper text

Properties

Types

input-types

Text (input) field

For general text input, such as names, addresses, and other string data.

Password

For securely entering passwords, where the input is masked.

Amount

For entering numerical amounts, such as currency or quantity.

Prefix label (or icon)

An input field that includes a prefix label (or icon), providing additional context for the type of data to be entered.

With trailing icon

An input field that includes an icon on the right side, indicating additional functionality or information related to the input.

Date

For selecting or entering dates with a calendar.

Date-range

For select a date between dates.

Time

Time picker is for selecting or entering time values with browsers’ time picker.

Multi-select

An input field that allows the selection of multiple options from a predefined list, providing flexibility in data input.

Select

Select is for selecting a single option from the overflow menu.

Text-area

A larger, multi-line input field for entering extended text or descriptions.

Sizes

input-sizes

Small

Small inputs are used in areas that require smaller-scale input usage such as in tables, cards, widgets.

Default

Default size inputs are primarily used in forms and modals.

Large

Large size inputs are used in login/sign-up flows.

Style

input-styles

Outline-white

The outline-white should be used when the layout or background color is gray-5 or gray-10

Outline

The outline input should be used when the layout or card background is mainly white or in background-surface color to balance the contrast.

States

Enabled

The enabled state is the default state where the input field is ready for user interaction and accepts input.

Hover

The hover state indicates interactivity when the cursor is on the input field by changing the border color.

Focus

The focus state is when the input is focused, typically after a user clicks on it or navigates to it using the keyboard.

Active

The active state is when the input is actively being used and ready for the user to type an input.

Destructive

The destructive input indicates that the input may have invalid data."

Warning

The warning indicates that there is a potential issue with the input.

Disabled

The disabled state is for where the input is non-interactive and grayed out, indicating it is not currently usable.

Behavior