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.

iconsText field

<div class="ray-text-field">
  <input
    class="ray-text-field__input"
    id="email"
    type="email"
    placeholder="arya.stark@winterfell.org"
  />
  <label class="ray-text-field__label" for="email">
    Email address
  </label>
</div>

iconsText field (RTL)

<div dir="rtl">
  <div class="ray-text-field">
    <input
      class="ray-text-field__input"
      id="email"
      type="email"
      placeholder="arya.stark@winterfell.org"
    />
    <label class="ray-text-field__label" for="email">
      כתובת דוא"ל
    </label>
  </div>
</div>

iconsText area

<div class="ray-text-area">
  <textarea
    class="ray-text-area__input"
    id="notes"
    type="email"
    placeholder="mlem mlem mlem mlem"
  ></textarea>
  <label class="ray-text-area__label" for="notes">
    Notes
  </label>
</div>

iconsText area with rows

<div class="ray-text-area">
  <textarea
    rows="4"
    class="ray-text-area__input"
    id="notes"
    type="email"
    placeholder="adding `rows` overrides default height"
  ></textarea>
  <label class="ray-text-area__label" for="notes">
    Long notes
  </label>
</div>

iconsText field with hints

Hint hint, your name of choice goes here. 
<div class="ray-form-item">
  <div class="ray-text-field">
    <input
      class="ray-text-field__input"
      id="name-with-hint"
      type="text"
      placeholder="Arya Stark"
    />
    <label class="ray-text-field__label" for="name-with-hint">
      Name
    </label>
  </div>
  <div class="ray-form-item__hint">
    Hint hint, your name of choice goes here.
  </div>
</div>

iconsText field with hints (RTL)

הזן את השם שלך כאן 
<div dir="rtl">
  <div class="ray-form-item">
    <div class="ray-text-field">
      <input
        class="ray-text-field__input"
        id="name-with-hint"
        type="text"
        placeholder="Arya Stark"
      />
      <label class="ray-text-field__label" for="name-with-hint">
        שֵׁם
      </label>
    </div>
    <div class="ray-form-item__hint">
      הזן את השם שלך כאן
    </div>
  </div>
</div>

iconsText field with icons

<div class="ray-form-item">
  <div class="ray-text-field ray-text-field--with-icon-start">
    <svg class="ray-text-field__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>

    <input
      type="text"
      class="ray-text-field__input"
      id="input-with-icon"
      placeholder="Few people are aware..."
    />
    <label class="ray-text-field__label" for="input-with-icon">
      Fun fact about Ray Eames
    </label>
  </div>
</div>

<div class="ray-form-item">
  <div class="ray-text-field ray-text-field--with-icon-end">
    <svg class="ray-text-field__icon--end" 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>

    <input
      type="text"
      class="ray-text-field__input"
      id="input-with-icon2"
      placeholder="Few people are aware..."
    />
    <label class="ray-text-field__label" for="input-with-icon2">
      Fun fact about Ray Eames
    </label>
  </div>
</div>

iconsText field with icons (RTL)

<div dir="rtl">
  <div class="ray-form-item">
    <div class="ray-text-field ray-text-field--with-icon-start">
      <svg class="ray-text-field__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>

      <input
        type="text"
        class="ray-text-field__input"
        id="input-with-icon"
        placeholder="מעטים יודעים ..."
      />
      <label class="ray-text-field__label" for="input-with-icon">
        עובדה מהנה עליך
      </label>
    </div>
  </div>

  <div class="ray-form-item">
    <div class="ray-text-field ray-text-field--with-icon-end">
      <svg class="ray-text-field__icon--end" 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>

      <input
        type="text"
        class="ray-text-field__input"
        id="input-with-icon2"
        placeholder="מעטים יודעים ..."
      />
      <label class="ray-text-field__label" for="input-with-icon2">
        עובדה מהנה עליך
      </label>
    </div>
  </div>
</div>

iconsText field with prepend

<div class="ray-form-item">
  <div class="ray-text-field ray-text-field--with-prepend">
    <div class="ray-text-field__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-text-field__wrapper">
      <input
        type="text"
        class="ray-text-field__input"
        id="input-with-icon"
        placeholder="Few people are aware..."
      />
      <label class="ray-text-field__label" for="input-with-icon">
        Fun fact about Ray Eames
      </label>
    </div>
  </div>
</div>

iconsText field with prepend (RTL)

<div dir="rtl">
  <div class="ray-form-item">
    <div class="ray-text-field ray-text-field--with-prepend">
      <div class="ray-text-field__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-text-field__wrapper">
        <input
          type="text"
          class="ray-text-field__input"
          id="input-with-icon"
          placeholder="מעטים יודעים ..."
        />
        <label class="ray-text-field__label" for="input-with-icon">
          עובדה מהנה עליך
        </label>
      </div>
    </div>
  </div>
</div>

iconsAdding hints

Use these modifiers with .ray-form-item__hint class.

SelectorDescription
.ray-form-item__hint--successSelector for applying hint success styles
.ray-form-item__hint--errorSelector for applying hint error styles

iconsModifiers for Text Fields and Text Areas

Use these modifiers with .ray-text-field or .ray-text-area class.

SelectorDescription
.ray-text-field--compact
.ray-text-area--compact		Selector for applying compact styles
.ray-text-field--active
.ray-text-area--active		Selector for applying active/focus styles
.ray-text-field--has-value
.ray-text-area--has-value		Selector for applying styles when field has value
.ray-text-field--disabled
.ray-text-area--disabled		Selector for applying disabled styles
.ray-text-field--error
.ray-text-area--error		Selector for applying error styles
.ray-text-field--success
.ray-text-area--success		Selector for applying success styles

iconsJavaScript

Text fields:

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

TextField.createAll();
// or
TextField.create(document.querySelector('.ray-text-field'));

Textareas:

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

TextArea.createAll();
// or
TextArea.create(document.querySelector('.ray-text-area'));
MethodParamsDescription
(TextField || TextArea).createAllHTMLElement:Objectcreate all instances in document
(TextField || TextArea).createHTMLElement:Objectcreate an instance
(TextField || TextArea).prototype.destroydestroy the instance
(TextField || TextArea).prototype.setsets the value of the instance