Toggle

Default toggle

HTML


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

  <h4 class="orc-c-field__label">Label</h4>

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

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

      <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-1" name="togglename" title="The Cosmopolitan Las Vegas" value="" checked />
      <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-1">
                Toggle 1
            </label>
      <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-2" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
      <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-2">
                Toggle 2
            </label>

    </div>
    <!-- end orc-c-toggle -->

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

When to use

Toggles are radio buttons with more style. Use these to add visual flair to actions such as selecting room types.

When to consider an alternative

When the options are more administrative in nature, use a radio field.

Class Name	Description
`orc-c-field` Required	Apply to the toggle 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 toggle field has an error.
`is-valid` Modifier	Added to `orc-c-field` to show that the toggle field is valid.
`is-disabled` Modifier	Added to `orc-c-field` to show that the toggle 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 `<h4>` element that labels the contents of the `orc-c-field__body`
`orc-c-field__body` Required	Container used to houses `orc-c-toggle`
`orc-c-toggle` Required	Container that houses the various `orc-c-toggle__input` and `orc-c-toggle__label` items. Apply `orc-js-toggle` to this to attach JavaScript functionality to this.
`orc-c-toggle__input` Required	Input of the toggle. Set `type` attribute to `radio` and add a class of `u-is-vishidden` so that the radio button is removed but the select functionality works on the `orc-c-toggle__label`. Also, add a class of `orc-js-toggle-input` so that JavaScript can latch onto this element.
`orc-c-toggle__label` Required	Selectable block with text of the `orc-c-toggle`. Apply to the `<label>` element for this to work properly since the `for` attribute helps with selecting the correct item.
`orc-c-field__note`	Short excerpt that adds additional directions or context to the toggle field. `orc-js-field-note` is applied for HTML form validation to print out a message when an error occurs.

Default toggle `orc-c-field orc-c-field--toggle`

Usage

When to use

When to consider an alternative