Form elements

Input components are a bit simpler than buttons. Just add the default input class (c-input), add the specific modifier class for the type of input (eg text) and optionally a theme (t-corporate). Just as with buttons they can be disabled, just add the modifier class 'disabled'.

Forms use themes for their different colors. If you want a different colored form element, try a different theme on the form.

Elements and modifiers

.pds-c-input[.disabled][.transparent]
input[type=text|number|email|tel|password|number|date|time].pds-c-input[.valid|.invalid]
textarea.pds-c-input[.full-width]
select.pds-c-input[.full-width]
label.pds-c-input-label
.pds-c-input-container[.radio|.checkbox]
.pds-c-input-container.radio > input[type=radio][.has-validation] + .pds-c-input-check + label
.pds-c-input-container.checkbox > input[type=checkbox][.has-validation] + .pds-c-input-check + label
.pds-c-progress[.pending|.ready|.error][.white] > .spinner

Some label

Label

<label for="label-demo" class="pds-c-input-label">Some label</label><br> <input id="label-demo" class="pds-c-input" type="text" value="demo">

Single text field

<input class="pds-c-input " id="1" name="textinput_name" type="text" value="" placeholder="Fill in something"></input>

Single text field, invalid input

<input class="pds-c-input invalid" id="1" name="textinput_name" type="text" value="" placeholder="Fill in something"></input>

Single text field, valid input

<input class="pds-c-input valid" id="1" name="textinput_name" type="text" value="" placeholder="Fill in something"></input>

Single text field, but disabled

<input class="pds-c-input disabled" id="1" name="textinput_name" type="text" value="" placeholder="Fill in something" disabled="disabled"></input>

Date field

<input class="pds-c-input " id="1" name="textinput_name" type="date" value="" placeholder=""></input>

Time field

<input class="pds-c-input " id="1" name="textinput_name" type="time" value="" placeholder=""></input>

Password field

<input class="pds-c-input " id="1" name="textinput_name" type="password" value="" placeholder=""></input>

Number field

<input class="pds-c-input " id="1" name="textinput_name" type="number" value="" placeholder=""></input>

Telephone field

<input class="pds-c-input " id="1" name="textinput_name" type="tel" value="" placeholder=""></input>

Textarea, full width

<textarea class="pds-c-input full-width" id="1" name="textarea_name"></textarea>

Dropdown

<select class="pds-c-input " id="3" name="dropdown">
  <option value="ja">Kies opleiding</option>
  <option value="nee">VSO</option>
  <option value="nee">VMBO</option>
</select>

Dropdown, full width

In some cases a version that spans the full width might be needed

<select class="pds-c-input full-width " id="3" name="dropdown">
  <option value="ja">Kies opleiding</option>
  <option value="nee">VSO</option>
  <option value="nee">VMBO</option>
</select>

Choose me

Radio

<div class="pds-c-input-container radio has-hover-propagation ">
  <label for="radio_1"><input class="pds-c-input" type="radio" id="radio_1" name="radio_name" value="yes"></input><div class="pds-c-input-check"></div> Choose me </label>
</div>

Check me

Checkbox

<div class="pds-c-input-container checkbox has-hover-propagation ">
  <label for="checkbox_1"><input class="pds-c-input" type="checkbox" id="checkbox_1" name="checkbox_name" value="yes"></input><div class="pds-c-input-check"></div> Check me </label>
</div>

padding

Fake input

<span class="pds-c-input">padding</span>

Progress spinner

White progress spinner