Input

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

1<input class="form-control form-control-lg" type="text" placeholder="Placeholder">

PUIK

Basic Use

For any input component that you use, replace the structure above with the following structure:

1<div class="puik-input">
2  <div class="puik-input__wrapper">
3    <input id="id" class="puik-input__field" placeholder="Placeholder" type="text">
4  </div>
5</div>

Parameters

You can use the usual attributes that can be found on an input tag (placeholder, disabled, type, min, max, step, etc.).

Number Type

For a number input component, replace the structure above with the following structure:

 1<div class="puik-input">
 2  <div class="puik-input__wrapper">
 3    <input class="puik-input__field" type="number">
 4    <div class="puik-input__controls">
 5      <button type="button" class="puik-input__controls__increment" aria-label="Increase">
 6        <span class="puik-input__controls__increment__icon">arrow_drop_up</span>
 7      </button>
 8      <button type="button" class="puik-input__controls__decrement" aria-label="Decrease">
 9        <span class="puik-input__controls__decrement__icon">arrow_drop_down</span>
10      </button>
11    </div>
12  </div>
13</div>
info
The aria-label="Increase" and aria-label="Decrease" attributes are important, as they explain to the user what the buttons are for.

Variants

2 variants are available for the input component:

  • success
  • error

To use any of them, add the puik-input__wrapper--${variant} class to the element that contains the puik-input__wrapper class:

1<div class="puik-input">
2  <div class="puik-input__wrapper puik-input__wrapper--${variant}">
3    <input class="puik-input__field" type="text">
4  </div>
5</div>

Example of Success Variant 

1<div class="puik-input">
2  <div class="puik-input__wrapper puik-input__wrapper--success">
3    <input class="puik-input__field" type="text">
4  </div>
5</div>

Example of Error Variant 

1<div class="puik-input">
2  <div class="puik-input__wrapper puik-input__wrapper--error">
3    <input class="puik-input__field" type="text">
4  </div>
5</div>

Disabled

For the input to have the disabled state, add the puik-input__wrapper--disabled class to the element that contains the puik-input__wrapper class:

1<div class="puik-input">
2  <div class="puik-input__wrapper puik-input__wrapper--disabled">
3    <input class="puik-input__field" disabled type="text">
4  </div>
5</div>

Hint

You can add a description text under the input component:

1<div class="puik-input">
2  <div class="puik-input__wrapper">
3    <input class="puik-input__field" type="text">
4  </div>
5  <div class="puik-input__hint">
6    <span class="puik-input__hint__text">This is a hint</span>
7  </div>
8</div>

Append/Preppend

You can add contents inside the input component, on the left/right of where the text will be entered:

1<div class="puik-input">
2  <div class="puik-input__wrapper">
3    <div class="puik-input__prepend">$</div>
4    <input class="puik-input__field" type="text">
5    <div class="puik-input__append">kg</div>
6  </div>
7</div>

Examples

Number Type, Disabled, Append, Prepend 

 1<div class="puik-input">
 2  <div class="puik-input__wrapper puik-input__wrapper--disabled">
 3    <div class="puik-input__prepend">$</div>
 4    <input class="puik-input__field" type="number" disabled>
 5    <div class="puik-input__append">kg</div>
 6    <div class="puik-input__controls">
 7      <button type="button" class="puik-input__controls__increment" aria-label="Increase">
 8        <span class="puik-input__controls__increment__icon">arrow_drop_up</span>
 9      </button>
10      <button type="button" class="puik-input__controls__decrement" aria-label="Decrease">
11        <span class="puik-input__controls__decrement__icon">arrow_drop_down</span>
12      </button>
13    </div>
14  </div>
15</div>

Password Type, Hint 

1<div class="puik-input">
2  <div class="puik-input__wrapper">
3    <input id="id" class="puik-input__field" placeholder="Placeholder" type="password">
4  </div>
5  <div class="puik-input__hint">
6    <span class="puik-input__hint__text">This is a hint</span>
7  </div>
8</div>
← Icon
Introduction →