Toggle dropdown

Default toggle dropdown

HTML


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

  <div class="orc-c-toggle-dropdown__selected orc-js-toggle-dropdown-selected" tabindex="0">
    <div class="orc-c-toggle-dropdown__content orc-js-toggle-dropdown-content">All Offers </div>
    <svg class="orc-c-icon orc-c-toggle-dropdown__icon">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#chevron-down"></use>
		</svg>
  </div>
  <!--end orc-c-toggle-dropdown__selected-->

  <div class="orc-c-toggle-dropdown__panel orc-js-toggle-dropdown-panel">

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



      <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="offers-1" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="offers-1">
                All Offers
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="offers-2" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="offers-2">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#rooms-suites"></use>
		        </svg>
                Rooms &amp; Suites
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="offers-3" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="offers-3">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#casino"></use>
		        </svg>
                At The Casino
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="offers-4" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="offers-4">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#entertainment"></use>
		        </svg>
                Entertainment
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-5" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-5">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#food-drink"></use>
		        </svg>
                Food &amp; Drink
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-6" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-6">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#resort-credit"></use>
		        </svg>
                Resort Credit
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-7" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-7">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#identity-light"></use>
		        </svg>
                Identity Play
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-8" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-8">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#rooms-suites"></use>
		        </svg>
                Tier Benefits
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="toggle-9" name="togglename" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="toggle-9">
		        <svg class="orc-c-icon orc-c-toggle__icon">
		            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#rooms-suites"></use>
		        </svg>
                Just For You
            </label>

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

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


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


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

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

When to use

Toggle dropdowns are select fields with more style. Use these to support custom menus containing high-priority user options.

When to consider an alternative

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

Class Name	Description
`orc-c-toggle-dropdown` Required	Apply to the toggle dropdown’s containing HTML element. This contains the toggle dropdown trigger that opens the toggle dropdown panel.
`orc-js-toggle-dropdown` JS	Apply in addition to `orc-c-toggle-dropdown` to allow JS to target this class for functionality.
`orc-c-toggle-dropdown__selected` Required	Apply to `div` that is formatted as the custom select input.
`orc-js-toggle-dropdown-selected` JS	Apply in addition to `orc-c-toggle-dropdown__selected` to allow JS to trigger this to open/close the toggle dropdown panel.
`orc-c-toggle-dropdown__content` Required	Apply to `div` within `orc-c-toggle-dropdown__selected` to represent the text of the custom select trigger.
`orc-js-toggle-dropdown-content` JS	Apply in addition `orc-c-toggle-dropdown__content` to allow JS to target this for functionality when selecting from the dropdown toggle panel.
`orc-c-icon` Required	Base icon class for icons within design system.
`orc-c-toggle-dropdown__icon` Required	Apply in addition to `orc-c-icon` to style icon specifically for the toggle dropdown.
`orc-c-toggle-dropdown__panel` Required	Apply to `div` below `orc-c-toggle-dropdown___selected` to layout the panel that opens and closes.
`orc-js-toggle-dropdown-panel` JS	Apply in addition to `orc-c-toggle-dropdown__panel` to allow JS to open and close this panel.
`orc-c-field--toggle` Required	Apply to the actual toggle component within the `orc-c-toggle-dropdown__panel`. See toggle for more information about classes used in this component.

Usage

When to use

When to consider an alternative