Input Fields Component

The purpose of an input field is to allow users to enter and edit text or data within a form or user interface.

Component States

Default State

The standard appearance of the input field.

[example image]

Hover State

The appearance when the user hovers over the input field.

[example image]

Active State

The appearance when the input field is clicked or pressed.

[example image]

Disabled

How the input field appears when it's not interactive.

[example image]

Focused State

The appearance when the input field is focused, usually via keyboard navigation.

[example image]

Error

The appearance of the input field when the user enters invalid or no value.

[example image]

Input States

Typed

The appearance of the input field changes when the user has entered the value.

[example image]

Not Typed

The appearance of the input field when the field is empty and has a placeholder text.

[example image]

Icon Presence/Location

Input field with icon

Icon Left

[TBC] The icon placed on the left can be used to signify the type of input expected.

Icon Right

The icon placed on the right can be used for actions like clearing input.

Messages

Error messages

Error messages are displayed below the input field to inform users of validation issues, and they are styled with red text and icons to catch the user’s attention.

Helper Text

Helper text offers additional context or instructions related to the input field. It appears below the field, and provides users with helpful hints or formatting guidelines.

Modes

Light Mode

[body copy]

Dark Mode

[body copy]

Visual Representation

[Show an image or embed a Figma frame/screenshot of each mode]

Changelog