Text Field

The canonical text field uses GenshiInput as its base class block.

<div class="GenshiInput">
  <label class="GenshiInput__label">
    User name
    <input type="text" class="GenshiInput__control" placeholder="User name" />
  </label>
  <small class="GenshiInput__helper">Your username must have between 3 and 10 characters.</small>
</div>
Your username must have between 3 and 10 characters.

Additional types

This control can also be used for the following other input types:

  • Passwords (type="password")
  • Email (type="email")
  • Number (type="number")
  • Telephone (type="tel")
  • URL (type="url")
  • Search (type="search")
  • Datetime (type="datetime-local")
  • Date (type="date")
  • Time (type="time")
  • Color (type="color")
  • File (type="file")

To see examples for files, please see its own page

Monospace

Apply the GenshiInput--mono modifier to the text field in order to render it using monospaced fonts.

Your username must have between 3 and 10 characters.

Disabled and read only

Add the disabled attribute to the <input> tag to disable the text field.

You cannot change the user name more than twice per 90 day period.

You can also add the readonly attribute to the <input> tag to mark it as read-only.

You cannot change the user name more than twice per 90 day period.

Icons

You can add icons to the text field by making sure that the <input> field is wrapped in a GenshiInput__control element. Then, attach an SVG with the GenshiInput__icon class, either before or after the input field.

Validation

For validation purposes you can add the aria-invalid="true" or aria-invalid="false" to the field.

If you are going to do this, it is recommended to include an icon, to convey the validation status without depending on color.

Everything looks valid.
This username is already taken.

Sizes

Use the GenshiInput--xs, GenshiInput--sm, GenshiInput--lg and GenshiInput--lg to alter its size.