Switch to M&T
DesignDevelop
Version 4.5.1
This page's guidelines are under construction. For questions on this component's use, please reach out to the Currency team.
Overview

Text Input

A text input is a type of form input that gathers plain text information from users. Every text input component must have a label and an input field. Optional placeholder and caption elements can also be added. These will provide the user with examples and more information about how to fill in the field.

Variants

Text Input
Use the default text field when the expected input is a single line, such as a name or phone number.
<label for="label-1" class="c-label">Label Name</label> 
<input type="text" class="c-text-field" id="label-1" placeholder="Text input placeholder"/>
Copy
Text Area
Use the textarea field when the expected input is more than one line, such as a comment or contact request.
<label for="label-2" class="c-label">Label Name</label> 
<textarea name="" class="c-textarea"  id="label-2" placeholder="Textarea placeholder"></textarea>
Copy

States

In addition to the default state, both types of text inputs have hover, focus, change and blur states. Optional success and loading states are also available. The error state takes the form of an `Input Error` component.

Success Text Input
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Neque volutpat ac tincidunt vitae semper. Libero id faucibus nisl tincidunt eget nullam non. Feugiat scelerisque varius morbi enim.
<label for="label-3" class="c-label">Label Name</label> 
<input type="text" class="c-text-field" id="label-3" placeholder="Text input placeholder" value="John Doe"/>
Copy
Disabled Text Input
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Neque volutpat ac tincidunt vitae semper. Libero id faucibus nisl tincidunt eget nullam non. Feugiat scelerisque varius morbi enim.
<label for="label-4" class="c-label">Label Name</label> 
<input type="text" class="c-text-field--disabled" disabled id="label-4" placeholder="Text input placeholder" value="John Doe"/>
Copy
Disabled Text Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis. Neque volutpat ac tincidunt vitae semper. Libero id faucibus nisl tincidunt eget nullam non. Feugiat scelerisque varius morbi enim.
<label for="label-5" className="c-label">
  Label Name
</label>
<textarea
  name=""
  className="c-textarea c-textarea--disabled"
  id="label-5"
  placeholder="Textarea placeholder"
></textarea>
Copy