Skip to content
Toyota Motor Europe DXP Reference Guide

Form Components

Form components consist of CSS and HTML markup.

Checkbox

Section titled “Checkbox”

This is to generate a full width input box with type="checkbox" in any context

<div class="form-check custom-form">
  <input type="checkbox" class="form-check-input inputbox" id="checkbox" />
  <label class="checkbox-label" for="checkbox">Check me out</label>
</div>
KSS Source

Radio

Section titled “Radio”

This is to generate a full width textarea in any context

<div class="form-radio custom-form">
  <input
    class="form-radio-input inputbox"
    type="radio"
    name="radioInputs"
    id="radioInput1"
    value="option1"
    checked
  />
  <label class="form-radio-label" for="radioInput1">Default radio</label>
</div>
<div class="form-radio custom-form">
  <input
    class="form-radio-input inputbox"
    type="radio"
    name="radioInputs"
    id="radioInput2"
    value="option2"
  />
  <label class="form-radio-label" for="radioInput2">Default radio</label>
</div>
KSS Source

Select

Section titled “Select”

This is to generate a full width Select box in any context

<div class="custom-form dropDownList">
  <select class="custom-select">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
KSS Source

Text

Section titled “Text”

This is to generate a full width input box with type="text" in any context

Please add proper value for this field.
<div class="form-group custom-form">
  <div class="inputboxWrapper">
    <input type="text" class="inputbox" placeholder="" required />
    <label for="inputbox" class="inputbox-label">Input Text Label</label>
  </div>
  <div class="fieldError form-text">
    Please add proper value for this field.
    <span class="icon icon-exclamation"></span>
  </div>
</div>
KSS Source

Email

Section titled “Email”

This is to generate a full width input box with type="email" in any context

Please add proper value for this field.
<div class="form-group custom-form">
  <div class="inputboxWrapper">
    <input type="email" class="inputbox" placeholder="" required />
    <label for="inputbox" class="inputbox-label">Input Email Label</label>
  </div>
  <div class="fieldError form-text">
    Please add proper value for this field.
    <span class="icon icon-exclamation"></span>
  </div>
</div>
KSS Source

Password

Section titled “Password”

This is to generate a full width input box with type="password" in any context

Please add proper value for this field.
<div class="form-group custom-form">
  <div class="inputboxWrapper">
    <input type="password" class="inputbox" placeholder="" required />
    <label for="inputbox" class="inputbox-label">Input Password Label</label>
  </div>
  <div class="fieldError form-text">
    Please add proper value for this field.
    <span class="icon icon-exclamation"></span>
  </div>
</div>
KSS Source

Telephone

Section titled “Telephone”

This is to generate a full width input box with type="tel" in any context

Please add proper value for this field.
<div class="form-group custom-form">
  <div class="inputboxWrapper">
    <input type="tel" class="inputbox" placeholder="" required />
    <label for="inputbox" class="inputbox-label">Input Tel Label</label>
  </div>
  <div class="fieldError form-text">
    Please add proper value for this field.
    <span class="icon icon-exclamation"></span>
  </div>
</div>
KSS Source

Textarea

Section titled “Textarea”

This is to generate a full width textarea in any context

<div class="custom-form">
  <textarea class="form-textarea" placeholder="Message"></textarea>
</div>
KSS Source