Ray - Documentation

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.

Select

What's your favorite Pokémon?

<div class="ray-select">
  <select class="ray-select__input">
    <option value="" disabled selected data-ray-placeholder></option>
    <option value="Pikachu">Pikachu</option>
    <option value="Squirtle">Squirtle</option>
    <option value="Squirtle">Charmander</option>
  </select>

  <label class="ray-select__label">
    What's your favorite Pokémon?
  </label>
</div>

With placeholder

What's your favorite Pokémon?

<div class="ray-select">
  <select class="ray-select__input">
    <option value="" disabled selected data-ray-placeholder
      >Pssst, choose Pikachu</option
    >
    <option value="Pikachu">Pikachu</option>
    <option value="Squirtle">Squirtle</option>
    <option value="Squirtle">Charmander</option>
  </select>

  <label class="ray-select__label">
    What's your favorite Pokémon?
  </label>
</div>

Select

מה הפוקימון האהוב עליך?

<div dir="rtl">
  <div class="ray-select">
    <select class="ray-select__input">
      <option value="" disabled selected data-ray-placeholder></option>
      <option value="Pikachu">פיקציו</option>
      <option value="Squirtle">סקווירטל</option>
      <option value="Bulbasaur">בלבזור</option>
    </select>

    <label class="ray-select__label">
      מה הפוקימון האהוב עליך?
    </label>
  </div>
</div>

Compact

What's your favorite Pokémon?

<div class="ray-select ray-select--compact">
  <select class="ray-select__input">
    <option value="" disabled selected data-ray-placeholder></option>
    <option value="Pikachu">Pikachu</option>
    <option value="Squirtle">Squirtle</option>
    <option value="Squirtle">Charmander</option>
  </select>

  <label class="ray-select__label">
    What's your favorite Pokémon?
  </label>
</div>

Compact (RTL)

מה הפוקימון האהוב עליך?

<div dir="rtl">
  <div class="ray-select ray-select--compact">
    <select class="ray-select__input">
      <option value="" disabled selected data-ray-placeholder></option>
      <option value="Pikachu">פיקציו</option>
      <option value="Squirtle">סקווירטל</option>
      <option value="Bulbasaur">בלבזור</option>
    </select>

    <label class="ray-select__label">
      מה הפוקימון האהוב עליך?
    </label>
  </div>
</div>

Error

What's your favorite Pokémon?

<div class="ray-select ray-select--error">
  <select class="ray-select__input">
    <option value="" disabled selected data-ray-placeholder></option>
    <option value="Pikachu">Pikachu</option>
    <option value="Squirtle">Squirtle</option>
    <option value="Squirtle">Charmander</option>
  </select>

  <label class="ray-select__label">
    What's your favorite Pokémon?
  </label>
</div>

Error (RTL)

מה הפוקימון האהוב עליך?

<div dir="rtl">
  <div class="ray-select ray-select--error">
    <select class="ray-select__input">
      <option value="" disabled selected data-ray-placeholder></option>
      <option value="Pikachu">פיקציו</option>
      <option value="Squirtle">סקווירטל</option>
      <option value="Bulbasaur">בלבזור</option>
    </select>

    <label class="ray-select__label">
      מה הפוקימון האהוב עליך?
    </label>
  </div>
</div>

With icon

Better Together

<div class="ray-form-item">
  <div class="ray-select ray-select--with-icon-start">
    <svg class="ray-select__icon--start" viewBox="0 0 25 25">
      <g id="budicon-profile-picture">
        <path
          d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
        />
      </g>
    </svg>
    <select class="ray-select__input">
      <option value="" disabled selected data-ray-placeholder></option>
      <option value="Pikachu">WeWork</option>
      <option value="Squirtle">WeLive</option>
      <option value="Bulbasaur">WeGrow</option>
      <option value="Charmander">WeTech</option>
    </select>

    <label class="ray-select__label">
      Better Together
    </label>
  </div>
</div>

With icon (RTL)

יחד טוב יותר

<div dir="rtl">
  <div class="ray-form-item">
    <div class="ray-select ray-select--with-icon-start">
      <svg class="ray-select__icon--start" viewBox="0 0 25 25">
        <g id="budicon-profile-picture">
          <path
            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
          />
        </g>
      </svg>
      <select class="ray-select__input">
        <option value="" disabled selected data-ray-placeholder></option>
        <option value="WeWork">WeWork</option>
        <option value="WeLive">WeLive</option>
        <option value="WeGrow">WeGrow</option>
        <option value="WeTech">WeTech</option>
      </select>

      <label class="ray-select__label">
        יחד טוב יותר
      </label>
    </div>
  </div>
</div>

With prepend

Better Together

<div class="ray-form-item">
  <div class="ray-select ray-select--with-prepend">
    <div class="ray-select__prepend">
      <svg viewBox="0 0 25 25" style="height: 1rem;">
        <g id="budicon-profile-picture">
          <path
            d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
          />
        </g>
      </svg>
    </div>
    <div class="ray-select__wrapper">
      <select class="ray-select__input">
        <option value="" disabled selected data-ray-placeholder></option>
        <option value="Pikachu">WeWork</option>
        <option value="Squirtle">WeLive</option>
        <option value="Bulbasaur">WeGrow</option>
        <option value="Charmander">WeTech</option>
      </select>

      <label class="ray-select__label">
        Better Together
      </label>
    </div>
  </div>
</div>

With prepend (RTL)

יחד טוב יותר

<div dir="rtl">
  <div class="ray-form-item">
    <div class="ray-select ray-select--with-prepend">
      <div class="ray-select__prepend">
        <svg viewBox="0 0 25 25" style="height: 1rem;">
          <g id="budicon-profile-picture">
            <path
              d="M12.5,4A4.5,4.5,0,1,0,17,8.5,4.5,4.5,0,0,0,12.5,4Zm0,8A3.5,3.5,0,1,1,16,8.5,3.504,3.504,0,0,1,12.5,12Zm0-12A12.4886,12.4886,0,0,0,5.0007,22.4834v0a12.4325,12.4325,0,0,0,14.9983,0v0q.5-.3761.9593-.7988l0,0A12.4869,12.4869,0,0,0,12.5,0Zm0,24a11.4432,11.4432,0,0,1-7.3931-2.7041,7.4887,7.4887,0,0,1,14.7863,0A11.4432,11.4432,0,0,1,12.5,24Zm8.25-3.5061a8.4871,8.4871,0,0,0-16.5,0,11.5,11.5,0,1,1,16.5,0Z"
            />
          </g>
        </svg>
      </div>
      <div class="ray-select__wrapper">
        <select class="ray-select__input">
          <option value="" disabled selected data-ray-placeholder></option>
          <option value="Pikachu">WeWork</option>
          <option value="Squirtle">WeLive</option>
          <option value="Bulbasaur">WeGrow</option>
          <option value="Charmander">WeTech</option>
        </select>

        <label class="ray-select__label">
          יחד טוב יותר
        </label>
      </div>
    </div>
  </div>
</div>

JavaScript API

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

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

// create instance
const select = Select.create(document.querySelector('.ray-select'));

// assign a value
select.set('pikachu');

// destroy
select.destroy();

Method	Params	Description
`Select.createAll`	`HTMLElement:Object`	create all instances in document
`Select.create`	`HTMLElement:Object`	create an instance
`Select.prototype.destroy`		destroy the instance
`Select.prototype.set`		sets the value of the instance

Modifiers

Use these modifiers with .ray-select class.

Selector	Description
`.ray-select--compact`	Selector for applying compact select styles
`.ray-select--error`	Selector for applying error styles

Component

Select

.cls-1{fill:none;}iconsSelect

.cls-1{fill:none;}iconsWith placeholder

.cls-1{fill:none;}iconsSelect

.cls-1{fill:none;}iconsCompact

.cls-1{fill:none;}iconsCompact (RTL)

.cls-1{fill:none;}iconsError

.cls-1{fill:none;}iconsError (RTL)

.cls-1{fill:none;}iconsWith icon

.cls-1{fill:none;}iconsWith icon (RTL)

.cls-1{fill:none;}iconsWith prepend

.cls-1{fill:none;}iconsWith prepend (RTL)

.cls-1{fill:none;}iconsJavaScript API

.cls-1{fill:none;}iconsModifiers

Select

With placeholder

Select

Compact

Compact (RTL)

Error

Error (RTL)

With icon

With icon (RTL)

With prepend

With prepend (RTL)

JavaScript API

Modifiers