Component

Text fields within the system have a standard size and a compact size. Our fields are outlined and become activated with our primary color using the rules we set up in our affordances. These components have several elements, not all of which are required.

iconsDropdown

<div class="ray-dropdown">
  <div class="ray-dropdown__wrapper">
    <select class="ray-dropdown__input" id="test">
      <option value="Pikachu">Pikachu</option>
      <option value="Squirtle">Squirtle</option>
      <option value="Squirtle">Charmander</option>
    </select>
  </div>
  <label class="ray-dropdown__label" for="test">
    What's your favorite Pokémon?
  </label>
</div>

iconsWith placeholder

<div class="ray-dropdown">
  <div class="ray-dropdown__wrapper">
    <select class="ray-dropdown__input" id="test-placeholder" value="">
      <option value="" data-ray-placeholder>
        Choose pokemon?
      </option>
      <option value="Slowpoke">Slowpoke</option>
      <option value="Pikachu">Pikachu</option>
      <option value="Squirtle">Squirtle</option>
      <option value="Charmander" disabled>
        Charmander
      </option>
      <option value="Sonichu">Sonichu</option>
    </select>
  </div>
  <label class="ray-dropdown__label" for="test-placeholder">
    Pokemon
  </label>
</div>

iconsCompact

<div class="ray-dropdown ray-dropdown--compact">
  <div class="ray-dropdown__wrapper">
    <select class="ray-dropdown__input" id="test-compact">
      <option value="Pikachu">Pikachu</option>
      <option value="Squirtle">Squirtle</option>
      <option value="Squirtle">Charmander</option>
    </select>
  </div>
  <label class="ray-dropdown__label" for="test-compact">
    What's your favorite Pokémon?
  </label>
</div>

iconsOptgroups

<div class="ray-dropdown">
  <div class="ray-dropdown__wrapper">
    <select class="ray-dropdown__input" id="test-optgroups" value="">
      <optgroup label="Ash">
        <option value="Pikachu">Pikachu</option>
        <option value="Charmander">Charmander</option>
        <option value="Squirtle">Squirtle</option>
      </optgroup>
      <optgroup label="R Team">
        <option value="Meowt">Meowt</option>
        <option value="Wobbuffet">Wobbuffet</option>
        <option value="Magikarp">Magikarp</option>
      </optgroup>
      <optgroup label="Others" disabled>
        <option value="Slowpoke">Slowpoke</option>
        <option value="Sonichu">Sonichu</option>
      </optgroup>
    </select>
  </div>
  <label class="ray-dropdown__label" for="test-optgroups">
    Pokemon
  </label>
</div>

iconsError

Is anything wrong? 
<div class="ray-dropdown ray-dropdown--error">
  <div class="ray-dropdown__wrapper">
    <select class="ray-dropdown__input" id="test-error">
      <option value="Pikachu">Pikachu</option>
      <option value="Squirtle">Squirtle</option>
      <option value="Squirtle">Charmander</option>
    </select>
    <label class="ray-dropdown__label" for="test-error">
      What's your favorite Pokémon?
    </label>
  </div>
</div>
<span class="ray-dropdown__hint">Is anything wrong?</span>

iconsWith Icon

😜
<div class="ray-dropdown ray-dropdown--with-icon-start">
  <div class="ray-dropdown__icon--start">😜</div>
  <div class="ray-dropdown__wrapper">
    <select
      class="ray-dropdown__input"
      id="test-icon"
      required
      aria-required="true"
    >
      <option value="" data-ray-placeholder>
        Choose pokemon?
      </option>
      <option value="Slowpoke">Slowpoke</option>
      <option disabled data-ray-separator />
      <option value="Pikachu">Pikachu</option>
      <option value="Squirtle">Squirtle</option>
      <option value="Charmander">Charmander</option>
      <option value="Sonichu">Sonichu</option>
    </select>
  </div>
  <label class="ray-dropdown__label" for="test-icon">
    Pokemon
  </label>
</div>

iconsDropdown (RTL)

<div dir="rtl">
  <div class="ray-dropdown">
    <div class="ray-dropdown__wrapper">
      <select class="ray-dropdown__input" id="rtl-test">
        <option value="Pikachu">Pikachu</option>
        <option value="Squirtle">Squirtle</option>
        <option value="Squirtle">Charmander</option>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test">
      What's your favorite Pokémon?
    </label>
  </div>
</div>

iconsWith Placeholder (RTL)

<div dir="rtl">
  <div class="ray-dropdown">
    <div class="ray-dropdown__wrapper">
      <select class="ray-dropdown__input" id="rtl-test-placeholder" value="">
        <option value="" data-ray-placeholder>
          Choose pokemon?
        </option>
        <option value="Slowpoke">Slowpoke</option>
        <option disabled data-ray-separator />
        <option value="Pikachu">Pikachu</option>
        <option value="Squirtle">Squirtle</option>
        <option value="Charmander" disabled>
          Charmander
        </option>
        <option value="Sonichu">Sonichu</option>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test-placeholder">
      Pokemon
    </label>
  </div>
</div>

iconsCompact (RTL)

<div dir="rtl">
  <div class="ray-dropdown ray-dropdown--compact">
    <div class="ray-dropdown__wrapper">
      <select class="ray-dropdown__input" id="rtl-test-compact">
        <option value="Pikachu">Pikachu</option>
        <option value="Squirtle">Squirtle</option>
        <option value="Squirtle">Charmander</option>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test-compact">
      What's your favorite Pokémon?
    </label>
  </div>
</div>

iconsOptgroups (RTL)

<div dir="rtl">
  <div class="ray-dropdown">
    <div class="ray-dropdown__wrapper">
      <select class="ray-dropdown__input" id="rtl-test-groups" value="">
        <optgroup label="Ash">
          <option value="Pikachu">Pikachu</option>
          <option value="Charmander">Charmander</option>
          <option value="Squirtle">Squirtle</option>
        </optgroup>
        <optgroup label="R Team">
          <option value="Meowt">Meowt</option>
          <option value="Wobbuffet">Wobbuffet</option>
          <option value="Magikarp">Magikarp</option>
        </optgroup>
        <optgroup label="Others" disabled>
          <option value="Slowpoke">Slowpoke</option>
          <option value="Sonichu">Sonichu</option>
        </optgroup>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test-groups">
      Pokemon
    </label>
  </div>
</div>

iconsError (RTL)

Is anything wrong? 
<div dir="rtl">
  <div class="ray-dropdown ray-dropdown--error">
    <div class="ray-dropdown__wrapper">
      <select class="ray-dropdown__input" id="rtl-test-error">
        <option value="Pikachu">Pikachu</option>
        <option value="Squirtle">Squirtle</option>
        <option value="Squirtle">Charmander</option>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test-error">
      What's your favorite Pokémon?
    </label>
  </div>
  <span class="ray-dropdown__hint">Is anything wrong?</span>
</div>

iconsWith Icon (RTL)

😜
<div dir="rtl">
  <div class="ray-dropdown ray-dropdown--with-icon-start">
    <div class="ray-dropdown__icon--start">😜</div>
    <div class="ray-dropdown__wrapper">
      <select
        class="ray-dropdown__input"
        id="rtl-test-icon"
        required
        aria-required="true"
      >
        <option value="" data-ray-placeholder>
          Choose pokemon?
        </option>
        <option value="Slowpoke">Slowpoke</option>
        <option disabled data-ray-separator />
        <option value="Pikachu">Pikachu</option>
        <option value="Squirtle">Squirtle</option>
        <option value="Charmander">Charmander</option>
        <option value="Sonichu">Sonichu</option>
      </select>
    </div>
    <label class="ray-dropdown__label" for="rtl-test-icon">
      Pokemon
    </label>
  </div>
</div>

iconsJavaScript API

import { Dropdown } from '@wework/ray-core';

// instantiate all instances on document
Dropdown.createAll();

// create instance
const dropdown = Dropdown.create(document.querySelector('.ray-dropdown'));

// assign a value
dropdown.set('Charmander');

// destroy
dropdown.destroy();

// open
dropdown.open();
MethodParamsDescription
Dropdown.createAllHTMLElement:Objectcreate all instances in document
Dropdown.createHTMLElement:Objectcreate an instance
Dropdown.prototype.destroydestroy the instance
Dropdown.prototype.setvalue:stringsets the value of the instance
Dropdown.prototype.clearclear the value of the instance
Dropdown.prototype.enablemakes instance enabled (active)
Dropdown.prototype.disablemakes instance disabled (inactive)
Dropdown.prototype.openopens dropdown list programmatically

iconsModifiers

Use these modifiers with .ray-dropdown class.

SelectorDescription
.ray-dropdown--compactSelector for applying compact dropdown styles
.ray-dropdown--errorSelector for applying error styles
.ray-dropdown--simpleSelector for applying removing styles when Dropdown is in prepend section