1. Components
  2. Form controls

Text field

A single-line empty form field in which the user can input any text.

Default text field orc-c-field

A single-line empty form field in which the user can input any text.

Text field error has-error

Lets the user know that their input text is invalid and can’t be registered in our system.

Text field valid is-valid

Lets the user know that their input text is valid and was registered.

Disabled text field is-disabled

Shows that the user can’t interact with the text field.

  • 
    
    <div class="orc-c-field  orc-js-field">
    
      <label for="" class="orc-c-field__label ">Label</label>
    
      <div class="orc-c-field__body">
    
        <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />
    
      </div>
      <!-- end orc-c-field__body -->
    
      <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>
    
    </div>
    <!-- end orc-c-field -->
  • 
    
    <div class="orc-c-field orc-has-error orc-js-field">
    
      <label for="" class="orc-c-field__label ">Label</label>
    
      <div class="orc-c-field__body">
    
        <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />
    
      </div>
      <!-- end orc-c-field__body -->
    
      <div class="orc-c-field__note orc-js-field-note">This is an invalid message</div>
    
    </div>
    <!-- end orc-c-field -->
  • 
    
    <div class="orc-c-field orc-is-valid orc-js-field">
    
      <label for="" class="orc-c-field__label ">Label</label>
    
      <div class="orc-c-field__body">
    
        <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />
    
      </div>
      <!-- end orc-c-field__body -->
    
      <div class="orc-c-field__note orc-js-field-note">This is a valid message</div>
    
    </div>
    <!-- end orc-c-field -->
  • 
    
    <div class="orc-c-field orc-is-disabled orc-js-field">
    
      <label for="" class="orc-c-field__label ">Label</label>
    
      <div class="orc-c-field__body">
    
        <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" disabled />
    
      </div>
      <!-- end orc-c-field__body -->
    
      <div class="orc-c-field__note orc-js-field-note">This is a disabled message</div>
    
    </div>
    <!-- end orc-c-field -->

Usage

When to use

When asking the user to provide a short free-form answer.

When to consider an alternative

When the question could invite a long answer, a textarea field gives the user more room to operate.

Class Name Description
orc-c-field
Required

Apply to the text field’s containing HTML element. This contains the field label, field body, and field note.

orc-js-field
JS

Added to orc-c-field so that JavaScript can target this element.

has-error
Modifier

Added to orc-c-field to show that the text field has an error.

is-valid
Modifier

Added to orc-c-field to show that the text field is valid.

is-disabled
Modifier

Added to orc-c-field to show that the text field is disabled. The input also needs to contain a disabled attribute to turn off any typing within the input.

orc-c-field__label
Required

Word or short phrase applied to an <label> element that labels the contents of the orc-c-field__body

orc-c-field__body
Required

Container used to house the text input

orc-c-input
Required

Actual text input of the field.

orc-c-field__note

Short excerpt that adds additional directions or context to the text field. orc-js-field-note is applied for HTML form validation to print out a message when an error occurs.