Input Fields

Input fields allow users to enter and submit data or information. These fields can take various forms but the predominant choice within this design system is the text box.

Text Fields

Users can input text or alphanumeric characters within text fields. It serves as an interactive input space where users can provide information, such as names, addresses, search queries, or messages. Text fields come in various sizes depending on the length of the input.

Default 
<form class="to-form">
  <input class="char-default" type="text" id="name" name="name" placeholder="" required />
</form>

Medium (15-25 characters)
<form class="to-form">
  <input class="char-md" type="text" id="name-md" name="name-md" placeholder="" required />
</form>

Small (under 10 characters)
<form class="to-form">
  <input class="char-sm" type="text" id="name-sm" name="name-sm" placeholder="" required />
</form>

Extra small (2-4 characters) 
<form class="to-form">
  <input class="char-xsm" type="text" id="name-xsm" name="name-xsm" placeholder="" required />
</form>