Textfield

Usage Style Code Playground
Textfields allow a user to provide textual information

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

Do use form labels with textfields

Do use hint text within textfields
Don’t use special characters within a textfield
Textfields allow a user to provide textual information

Coming soon...

Please enjoy a cat while you wait

Textfields allow a user to provide textual information

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

Make sure that when you use a error textfield you put an aria-invalid="true" attribute on the input element 
<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

Make sure that when you use a readonly textfield you put the readonly attribute on the input element 
<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

Make sure that when you use a disabled textfield you put the disabled attribute on the input element 
<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.

Use trailing icons sparingly. Users may have extensions or browser specific elements for inputs who are, by design, on the right side. 

<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 corresponding for attribute on the label itself to associate the two together.
  • If a field is required, you MUST include the aria-required attribute set to true, the aria-invalid attribute set to false, and the required 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: 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: 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: 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>

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>