Input

An input component is used to elicit a response from a user.

The Input comes in small (default) and large size, and can hold other components like Buttons when needed.

Basic

Description text

HTML
    <form class="form">
  <div class="form__item">
    <input id="form_id" type="text" name="form_id" placeholder="Label" class="form__input">
    <label for="form_id" class="form__label">Label</label>
    <p class="form__description">Description text</p>
  </div>
</form>
  

Read-only

Description text

HTML
    <form class="form">
  <div class="form__item">
    <input id="form_read_only" type="text" name="form_read_only" placeholder="Label" readonly="readonly" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs">
    <label for="form_id" class="form__label">Label</label>
    <p class="form__description">Description text</p>
  </div>
</form>
  

With action/extras

+386

Description text

/orange

Description text

HTML
    <form class="form">
  <div class="form__item has-action">
    <div class="form__action">
      +386
    </div>

    <div class="form__input-wrapper">
      <input id="form_action_left" type="text" name="form_action_left" class="form__input">
      <label for="form_action_left" class="form__label">Your phone number</label>
    </div>
    <p class="form__description">Description text</p>
  </div>

  <div class="form__item has-action">
    <div class="form__input-wrapper">
      <input id="form_action_right" type="text" name="form_action_right" class="form__input">
      <label for="form_action_right" class="form__label">https://example.com</label>
    </div>

    <div class="form__action">
      /orange
    </div>
    <p class="form__description">Description text</p>
  </div>
</form>
  

Read-only with action/extras

To change your API key please contact support

To change your API key please contact support

HTML
    <form class="form">
  <div class="form__item has-action">
    <div class="form__action">
      <button type="button" class="button button--small">
        copy to clipboard
      </button>
    </div>

    <div class="form__input-wrapper">
      <input id="form_action_button_left" type="text" name="form_action_button_left" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs" readonly="readonly">
      <label for="form_action_button_left" class="form__label">Your API key</label>
    </div>
    <p class="form__description">To change your API key please contact support</p>
  </div>

  <div class="form__item has-action">
    <div class="form__input-wrapper">
      <input id="form_action_button_right" type="text" name="form_action_button_right" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs" readonly="readonly">
      <label for="form_action_button_right" class="form__label">Your API key</label>
    </div>

    <div class="form__action">
      <button type="button" class="button button--small">
        copy to clipboard
      </button>
    </div>
    <p class="form__description">To change your API key please contact support</p>
  </div>
</form>
  

Large

Description text

HTML
    <form class="form form--large">
  <div class="form__item">
    <input id="form_large" type="text" name="form_large" class="form__input">
    <label for="form_large" class="form__label">Label</label>
    <p class="form__description">Description text</p>
  </div>
</form>
  

Large and read-only

Description text

HTML
    <form class="form form--large">
  <div class="form__item">
    <input id="form_large_read_only" type="text" name="form_large_read_only" readonly="readonly" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs">
    <label for="form_large_read_only" class="form__label">Label</label>
    <p class="form__description">Description text</p>
  </div>
</form>
  

Large with action/extras

/orange
+386
HTML
    <form class="form form--large">
  <div class="form__item has-action">
    <div class="form__input-wrapper">
      <input id="form_large_action_right" type="text" name="form_large_action_right" class="form__input">
      <label for="form_large_action_right" class="form__label">https://example.com</label>
    </div>

    <div class="form__action">
      /orange
    </div>
  </div>

  <div class="form__item has-action">
    <div class="form__action">
      +386
    </div>

    <div class="form__input-wrapper">
      <input id="form_large_action_left" type="text" name="form_large_action_left" class="form__input">
      <label for="form_large_action_left" class="form__label">Your phone number</label>
    </div>
  </div>
</form>
    
  

Large, read-only with action/extras

To change your API key please contact support

To change your API key please contact support

HTML
    <form class="form form--large">
  <div class="form__item has-action">
    <div class="form__action">
      <button type="button" class="button button--small">
        copy to clipboard
      </button>
    </div>

    <div class="form__input-wrapper">
      <input id="form_large_action_button_left" type="text" name="form_large_action_button_left" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs" readonly="readonly">
      <label for="form_large_action_button_left" class="form__label">Your API key</label>
    </div>

    <p class="form__description">To change your API key please contact support</p>
  </div>

  <div class="form__item has-action">
    <div class="form__input-wrapper">
      <input id="form_large_action_button_right" type="text" name="form_large_action_button_right" class="form__input has-value" value="cw8BT7BcJzZQqlnwGZ53XD3cdfEXArGs" readonly="readonly">
      <label for="form_large_action_button_right" class="form__label">Your API key</label>
    </div>

    <div class="form__action">
      <button type="button" class="button button--small">
        copy to clipboard
      </button>
    </div>

    <p class="form__description">To change your API key please contact support</p>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
size Set with .form--large on .form large string - -
disabled Set with disabled attribute on input disabled string - -
read-only Set with readonly attribute on input readonly string - -
action Set with .has-action class on .form__item to color up input value if read-only has-action string - -