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.