Textfield
General Guidelines
Textfields serve to allow users to select, input, or edit text within a limited area. They are used for small form fields and are not meant for large paragraphs of text.
Textfields have the following three states:
- Required
- Inactive
- Optional
A textfield should always be accompanied by a form label and have relevant hint text within the field, to help provide the user with context.
When a user clicks on a textfield, it should auto-focus and the cursor should trigger. The hint text should clear the first time a user clicks on the textfield, but it should reappear when a user clears the textfield altogether.
As a best practice, textfields should have logic that auto-formats for entries like phone number, social security number, currency, and others.
If a field entry is invalid, a clear error message should display. The message should clearly articulate the issue with actionable context for the user, for example, when a field is incomplete, when the entry has an improper format, or when the entry exceeds a character limit.
Voice and Tone
Textfields should only provide a brief hint to what needs to be input. The hint text does not change, because the user will be entering text over it.
Refrain from using special characters, as textfields typically consist of characters and digits. If a special character is required, leverage auto-formatting for fields like phone numbers and currency.
Usage
Configurations | When |
---|---|
Use a textfield | When you need the user to fill in information in a form |
Use a textfield | To limit the number of characters in a response in a text area. |
Do's and Don'ts


Coming soon...
Please enjoy a cat while you wait
Examples
For details on when to use this component, see the Usage tab.
<label for="static_textfield" class="mar-bottom--md block">Static Textfield</label>
<div class="iris-textfield">
<input type="text" id="static_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
States
The states of this component are as follows:
Error
<label for="error_textfield" class="mar-bottom--md block">Static Textfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="error_textfield" class="iris-textfield__input" aria-invalid="true" placeholder="Enter text here" />
</div>
Readonly
<label for="readonly_textfield" class="mar-bottom--md block">Readonly Textfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="readonly_textfield" class="iris-textfield__input" readonly placeholder="Enter text here" />
</div>
Disabled
<label for="disabled_textfield" class="mar-bottom--md block">Disabled Textfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="disabled_textfield" class="iris-textfield__input" disabled placeholder="Enter text here" />
</div>
Decorators
The decorators of this component are as follows:
Inline
<label for="inline_textfield" class="mar-bottom--md block">Inline Textfield</label>
<div class="iris-textfield " data-display="inline">
<input type="text" id="inline_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
Small
<label for="small_textfield" class="mar-bottom--md block">Small Textfield</label>
<div class="iris-textfield " data-size="small">
<input type="text" id="small_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
Medium
<label for="medium_textfield" class="mar-bottom--md block">Medium Textfield</label>
<div class="iris-textfield " data-size="medium">
<input type="text" id="medium_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
Large
<label for="large_textfield" class="mar-bottom--md block">Large Textfield</label>
<div class="iris-textfield " data-size="large">
<input type="text" id="large_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
Compressed
<label for="compressed_textfield" class="mar-bottom--md block">Compressed Textfield</label>
<div class="iris-textfield" data-modifier="compressed" data-size="medium">
<input type="text" id="compressed_textfield" class="iris-textfield__input" placeholder="Enter text here" />
</div>
Icon
This decorator requires adding an icon into the markup. To add an icon to the left you will use data-icon-position="leading"
To add an icon to the right you will use data-icon-position="trailing"
You can use <button>
instead of '' to create an accessible action icon.
<label for="icon_textfield" class="mar-bottom--md block">Icon Textfield</label>
<div class="iris-textfield">
<span class="iris-textfield__icon font-icon-search" aria-hidden="true"></span>
<input type="text" id="icon_textfield" class="iris-textfield__input" placeholder="Search" />
</div>
<label for="icon_textfield" class="mar-bottom--md block">Trailing Icon Textfield</label>
<div class="iris-textfield" data-icon-position="trailing" >
<input type="text" id="icon_textfield" class="iris-textfield__input" placeholder="mm-dd-yyyy" />
<button class="iris-textfield__icon font-icon-calendar" aria-label="Pick a date"></button>
</div>
Textarea
You can use the same variants, states, and decorators on a textarea
. For more information about textareas please reference MDN's input documentation.
<label for="textarea" class="mar-bottom--md block">Textarea</label>
<div class="iris-textfield">
<textarea id="textarea" class="iris-textfield__input" placeholder="Textarea"> </textarea>
</div>
Optional Textfields
Required fields should not be decorated with an asterisk; instead all non-required fields should have a label suffix of (Optional) using the iris-form-note
class.
<label for="required_field_1">Required Field</label>
<div class="iris-textfield" data-size="medium">
<input id="required_field_1" type="text" class="iris-textfield__input" placeholder="Required" aria-required="true" />
</div>
<label for="optional_field_1">Optional Field <span class="iris-form-note">(optional)</span></label>
<div class="iris-textfield" data-size="medium">
<input id="optional_field_1" type="text" class="iris-textfield__input" placeholder="Optional" />
</div>
Accessibility
As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:
- You must have an
id
attribute on the input field and a correspondingfor
attribute on the label itself to associate the two together. - If a field is required, you MUST include the
aria-required
attribute set totrue
, thearia-invalid
attribute set tofalse
, and therequired
HTML5 attribute on the input field. - If there is additional descriptions of an input field, use the
aria-describedby
attribute to inform the screenreader to read that description first before focusing on the input field.
Variables
// Border variables
$input-border: 1px solid $dove-gray !default;
$input-border-error: $thunderbird !default;
$input-border-disabled: transparentize($dove-gray, 0.5) !default;
$input-border-readonly: transparent !default;
// Text variables
$input-font-size: 1.3rem !default;
$input-line-height-textarea: 1.5rem !default;
$input-text: $mine-shaft !default;
$input-text-placeholder: $dove-gray !default;
$input-text-disabled: transparentize($mine-shaft, 0.5) !default;
$input-text-readonly: $mine-shaft !default;
// Box shadow variables
$input-box-shadow-focus: $steel-blue !default;
$input-box-shadow-error: $thunderbird !default;
$input-box-shadow-disabled: none !default;
// Background variables
$input-background-readonly: transparent !default;
Themeability
Nothing is themeable in this component.
Variant: *Standard** | State: Static | Decorator: None*
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield ">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Static textfield" />
</div>
Variant: *Standard** | State: Static | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield ">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Static textfield" />
</div>
Variant: *Standard** | State: Static | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield ">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Static textfield" />
</div>
Variant: *Standard** | State: Static | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield ">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Static textfield" />
</div>
Variant: *Standard** | State: Static | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield ">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Static textfield" />
</div>
Variant: *Standard** | State: Error | Decorator: None*
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Error textfield" />
</div>
Variant: *Standard** | State: Error | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Error textfield" />
</div>
Variant: *Standard** | State: Error | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Error textfield" />
</div>
Variant: *Standard** | State: Error | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Error textfield" />
</div>
Variant: *Standard** | State: Error | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--error">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Error textfield" />
</div>
Variant: *Standard** | State: Readonly | Decorator: None*
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Readonly textfield" />
</div>
Variant: *Standard** | State: Readonly | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Readonly textfield" />
</div>
Variant: *Standard** | State: Readonly | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Readonly textfield" />
</div>
Variant: *Standard** | State: Readonly | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Readonly textfield" />
</div>
Variant: *Standard** | State: Readonly | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--readonly">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Readonly textfield" />
</div>
Variant: *Standard** | State: Disabled | Decorator: None*
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Disabled textfield" />
</div>
Variant: *Standard** | State: Disabled | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Disabled textfield" />
</div>
Variant: *Standard** | State: Disabled | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Disabled textfield" />
</div>
Variant: *Standard** | State: Disabled | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Disabled textfield" />
</div>
Variant: *Standard** | State: Disabled | Decorator: *
<label for="textfield" class="mar-bottom--md block">A Texfield</label>
<div class="iris-textfield iris-textfield--disabled">
<input type="text" id="textfield" class="iris-textfield__input" placeholder="Disabled textfield" />
</div>