Select field

Default select field
Select field error
Select field valid
Disabled select field

HTML


<div class="orc-c-field  orc-js-field">

  <label for="" class="orc-c-field__label">Label</label>

  <div class="orc-c-field__body">

    <select class="orc-c-select" id="" name="" placeholder="Placeholder">

    <option value="option-1" >Option 1</option>
    <option value="option-2" >Option 2</option>


</select>
    <!--end orc-c-select-->


  </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 -->

HTML


<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">

    <select class="orc-c-select" id="" name="" placeholder="Placeholder">

    <option value="option-1" >Option 1</option>
    <option value="option-2" >Option 2</option>


</select>
    <!--end orc-c-select-->


  </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 -->

HTML


<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">

    <select class="orc-c-select" id="" name="" placeholder="Placeholder">

    <option value="option-1" >Option 1</option>
    <option value="option-2" >Option 2</option>


</select>
    <!--end orc-c-select-->


  </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 -->

HTML


<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">

    <select class="orc-c-select" id="" name="" placeholder="Placeholder" disabled>

    <option value="option-1" >Option 1</option>
    <option value="option-2" >Option 2</option>


</select>
    <!--end orc-c-select-->


  </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 -->

When to use

Use this component liberally on our sites when giving the user many (4+) options to choose from.

When to consider an alternative

A radio field could be preferential when where are only 2 or 3 options, especially when the user has a long series of selections to make (as on their profile page).

Class Name	Description
`orc-c-field` Required	Apply to the select 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 select field has an error.
`is-valid` Modifier	Added to `orc-c-field` to show that the select field is valid.
`is-disabled` Modifier	Added to `orc-c-field` to show that the select field is disabled. The `inputs` also need to contain a `disabled` attribute to turn off any selecting/deselecting functionality.
`orc-c-field__label` Required	Word or short phrase applied to an `<h4>` element that labels the contents of the `orc-c-field__body`
`orc-c-field__body` Required	Container used to house the select items
`orc-c-select` Required	Select input that contains a list of `<option>` items for a user to choose from.
`orc-c-field__note`	Short excerpt that adds additional directions or context to the select field. `orc-js-field-note` is applied for HTML form validation to print out a message when an error occurs.

Default select field `orc-c-field`

Select field error `has-error`

Select field valid `is-valid`

Disabled select field `is-disabled`

Usage

When to use

When to consider an alternative