Skip to content
CFA Design System

Text Input

Guidelines React

Text fields allow users to input or modify text to collect user data.

Example of the text input component

Variants

Section titled “Variants”

Size

Section titled “Size”

Text inputs come in two sizes; compact and spacious.

Examples of the size variations of the text input

Behavior and States

Section titled “Behavior and States”

Default, Hover, Selected, Disable, and Focus.

Example of the states of the text input

Statuses

Section titled “Statuses”

Default, Error, Success, and Read Only.

Example of the statuses available with the text input

Max Length

Section titled “Max Length”

Character limits help manage the length of input a user can enter into a text field when a specific amount of data is required. By communicating these limits it ensures a better user experience and reduces input errors.

Example of max length in the text input