Storybook Demo

Form

Checkboxes Title

Checkbox option #1

Checkbox option #2

Checkbox option #3

Checkbox option #4

Disabled checkbox option #5

Optional about/helper message

<fieldset class="cmp-form-options cmp-form-options--checkbox">
  <div v-input-active="" class="cmp-input">
    <legend class="cmp-form-options__legend">
      Checkboxes Title
    </legend>
    <div>
      <div class="cmp-input__custom-checkbox">
        <input type="checkbox" id="checkbox_option_#1" value="checkbox_option_#1" class="cmp-form-options__field cmp-form-options__field--checkbox">
        <label for="checkbox_option_#1" class="cmp-form-options__field-label cmp-form-options__field-description">
          Checkbox option #1
        </label>
      </div>
      <div class="cmp-input__custom-checkbox">
        <input type="checkbox" id="checkbox_option_#2" value="checkbox_option_#2" class="cmp-form-options__field cmp-form-options__field--checkbox">
        <label for="checkbox_option_#2" class="cmp-form-options__field-label cmp-form-options__field-description">
          Checkbox option #2
        </label>
      </div>
      <div class="cmp-input__custom-checkbox">
        <input type="checkbox" id="checkbox_option_#3" value="checkbox_option_#3" class="cmp-form-options__field cmp-form-options__field--checkbox">
        <label for="checkbox_option_#3" class="cmp-form-options__field-label cmp-form-options__field-description">
          Checkbox option #3
        </label>
      </div>
      <div class="cmp-input__custom-checkbox">
        <input type="checkbox" id="checkbox_option_#4" value="checkbox_option_#4" class="cmp-form-options__field cmp-form-options__field--checkbox">
        <label for="checkbox_option_#4" class="cmp-form-options__field-label cmp-form-options__field-description">
          Checkbox option #4
        </label>
      </div>
      <div class="cmp-input__custom-checkbox">
        <input type="checkbox" disabled="disabled" id="checkbox_option_#5" value="checkbox_option_#5" class="cmp-form-options__field cmp-form-options__field--checkbox">
        <label for="checkbox_option_#5" class="cmp-form-options__field-label cmp-form-options__field-description">
          Disabled checkbox option #5
        </label>
      </div>
    </div>
  </div>
  <p class="cmp-form-options__help-message">
    Optional about/helper message
  </p>
</fieldset>

Radio buttons

Radio button option #1

Radio button option #2

Radio button option #3

Radio button option #4

Disabled radio button option #5

Optional about/helper message

<fieldset class="cmp-form-options cmp-form-options--radio">
  <div v-input-active="" class="cmp-input">
    <legend class="cmp-form-options__legend">
      Radio buttons
    </legend>
    <div>
      <div class="cmp-input__custom-radio">
        <input type="radio" name="radio_buttons" id="radio_button_option_#1" value="radio_button_option_#1" class="cmp-form-options__field cmp-form-options__field--radio">
        <label for="radio_button_option_#1" class="cmp-input__radio-label cmp-form-options__field-label cmp-form-options__field-description">
          Radio button option #1
        </label>
      </div>
    </div>
    <div>
      <div class="cmp-input__custom-radio">
        <input type="radio" name="radio_buttons" id="radio_button_option_#2" value="radio_button_option_#2" class="cmp-form-options__field cmp-form-options__field--radio">
        <label for="radio_button_option_#2" class="cmp-input__radio-label cmp-form-options__field-label cmp-form-options__field-description">
          Radio button option #2
        </label>
      </div>
    </div>
    <div>
      <div class="cmp-input__custom-radio">
        <input type="radio" name="radio_buttons" id="radio_button_option_#3" value="radio_button_option_#3" class="cmp-form-options__field cmp-form-options__field--radio">
        <label for="radio_button_option_#3" class="cmp-input__radio-label cmp-form-options__field-label cmp-form-options__field-description">
          Radio button option #3
        </label>
      </div>
    </div>
    <div>
      <div class="cmp-input__custom-radio">
        <input type="radio" name="radio_buttons" id="radio_button_option_#4" value="radio_button_option_#4" class="cmp-form-options__field cmp-form-options__field--radio">
        <label for="radio_button_option_#4" class="cmp-input__radio-label cmp-form-options__field-label cmp-form-options__field-description">
          Radio button option #4
        </label>
      </div>
    </div>
    <div>
      <div class="cmp-input__custom-radio">
        <input type="radio" disabled="disabled" name="radio_buttons" id="radio_button_option_#5" value="radio_button_option_#5" class="cmp-form-options__field cmp-form-options__field--radio">
        <label for="radio_button_option_#5" class="cmp-input__radio-label cmp-form-options__field-label cmp-form-options__field-description">
          Disabled radio button option #5
        </label>
      </div>
    </div>
  </div>
  <p class="cmp-form-options__help-message">
    Optional about/helper message
  </p>
</fieldset>

Toggle

Toggle option #1 Toggle option #1_2

Toggle option #2 Toggle option #2_2

Toggle option #3 Toggle option #3_2

Toggle option #4 Toggle option #4_2

Disabled toggle option #5 Disabled toggle option #5_2

Optional about/helper message

<fieldset class="cmp-form-options cmp-form-options--toggle">
  <div v-input-active="" class="cmp-input">
    <legend>Toggle</legend>
    <div class="cmp-input__toggle">
      <span>Toggle option #1</span>
      <input name="toggle" type="checkbox" id="toggle option #1">
      <label for="toggle option #1"></label>
      <span>Toggle option #1_2</span>
    </div>
    <div class="cmp-input__toggle">
      <span>Toggle option #2</span>
      <input name="toggle" type="checkbox" id="toggle option #2">
      <label for="toggle option #2"></label>
      <span>Toggle option #2_2</span>
    </div>
    <div class="cmp-input__toggle">
      <span>Toggle option #3</span>
      <input name="toggle" type="checkbox" id="toggle option #3">
      <label for="toggle option #3"></label>
      <span>Toggle option #3_2</span>
    </div>
    <div class="cmp-input__toggle">
      <span>Toggle option #4</span>
      <input name="toggle" type="checkbox" id="toggle option #4">
      <label for="toggle option #4"></label>
      <span>Toggle option #4_2</span>
    </div>
    <div class="cmp-input__toggle">
      <span>Disabled toggle option #5</span>
      <input name="toggle" type="checkbox" disabled="disabled" id="toggle option #5">
      <label for="toggle option #5"></label>
      <span>Disabled toggle option #5_2</span>
    </div>
  </div>
  <p class="cmp-form-options__help-message">
    Optional about/helper message
  </p>
</fieldset>

Dropdown Error Message

Optional about/helper message

<fieldset class="cmp-form-options cmp-form-options--drop-down">
  <div v-input-active="" class="cmp-input">
    <div class="cmp-input__icon-wrap cmp-input__icon-wrap--select">
      <label for="dropdown-input" class="cmp-input__float-label cmp-input__float-label--select cmp-form-options__label">
        Dropdown
      </label>
      <select name="Dropdown" id="dropdown-input" class="cmp-input__float-field cmp-input__float-field--drop-down">
        <option></option>
        <option value="dropdown_option_#1">
          Dropdown option #1
        </option>
        <option value="dropdown_option_#2">
          Dropdown option #2
        </option>
        <option value="dropdown_option_#3">
          Dropdown option #3
        </option>
        <option value="dropdown_option_#4">
          Dropdown option #4
        </option>
        <option disabled="disabled" value="dropdown_option_#5">
          Disabled dropdown option #5
        </option>
      </select>
      <span class="cmp-input__error">Error Message</span>
    </div>
  </div>
  <p class="cmp-form-options__help-message">
    Optional about/helper message
  </p>
</fieldset>

Labeled text input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="labeled_text_input" class="cmp-input__float-label">
      Labeled text input
    </label>
    <input type="text" id="labeled_text_input" name="labeled_text_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Text input with helper message

Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <p class="cmp-form-text__help-block">
    Text input with helper message
  </p>
  <div class="cmp-input__icon-wrap">
    <input type="text" id="text_input_helper_message" name="text_input_helper_message" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Text input with helper message and placeholder when active

Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <p class="cmp-form-text__help-block">
    Text input with helper message and placeholder when active
  </p>
  <div class="cmp-input__icon-wrap">
    <input type="text" class="cmp-form-text__text cmp-input__float-field" id="text_input_with_helper_message_as_placeholder" name="text_input_with_helper_message_as_placeholder" placeholder="Optional about/helper message as placeholder">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Required text input Error Message

<div v-input-active="" class="cmp-form-text cmp-input" data-cmp-required-message="This field is required">
  <div class="cmp-input__icon-wrap">
    <label for="required_text_input" class="cmp-input__float-label">
      Required text input
    </label>
    <input type="text" required="required" id="required_text_input" name="required_text_input" data-required-message="This field is required" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

                  
                    Textarea (6 lines default)
                  
                  Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="textarea-input" class="cmp-input__float-label">
      Textarea (6 lines default)
    </label>
    <textarea rows="6" name="textarea" id="textarea-input" class="cmp-form-text__textarea cmp-input__float-field"></textarea>
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Email input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="email_input" class="cmp-input__float-label">
      Email input
    </label>
    <input type="email" id="email_input" name="email_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Phone number input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="phone_number_input" class="cmp-input__float-label">
      Phone number input
    </label>
    <input type="tel" id="phone_number_input" name="phone_number_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Date input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="date_input" style="z-index: -1;" class="cmp-input__float-label hack-date-fix">
      Date input
    </label>
    <input type="date" id="date_input" name="date_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Number input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label for="number_input" class="cmp-input__float-label">
      Number input
    </label>
    <input type="number" id="number_input" name="number_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Empty read-only text input Error Message

<div v-input-active="" class="cmp-form-text cmp-input">
  <div class="cmp-input__icon-wrap">
    <label class="cmp-input__float-label" for="empty_read_only_text_input">
      Empty read-only text input
    </label>
    <input type="text" readonly="readonly" id="empty_read_only_text_input" name="empty_read_only_text_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

Read-only text input Error Message

<div v-input-active="" class="cmp-form-text cmp-input cmp-input--active">
  <div class="cmp-input__icon-wrap">
    <label for="read_only_text_input" class="cmp-input__float-label">
      Read-only text input
    </label>
    <input type="text" readonly="readonly" value="Some random value" id="read_only_text_input" name="read_only_text_input" class="cmp-form-text__text cmp-input__float-field">
    <span class="cmp-input__error">Error Message</span>
  </div>
</div>

<div class="sika-form-button">
  <button type="submit" class="cmp-button button primary">
    Submit
  </button>
</div>

<div class="sika-form-button">
  <button type="submit" class="cmp-button button primary cmp-button--center">
    Submit Center
  </button>
</div>

<div class="sika-form-button">
  <button type="submit" class="cmp-button button primary cmp-button--right">
    Submit Right
  </button>
</div>