Just.Design System

v0.0.28
IntroductionApproach and team
Guidelines
AssetsColour PaletteColour UsageColour Usage - CoralFontsIconsTypography
Components
ButtonCheckboxDateDropdownInputKeylineLinkRadio
Patterns
FooterGridHeaderModal
DownloadsFAQ

Input

Default

Code

<label class="label">Label</label>
<input class="input" placeholder="Hint text" type="text" />

Activated

Code

<label class="label">Label</label>
<input class="input input--active" placeholder="Hint text" type="text" />

Hover

Code

<label class="label">Label</label>
<input class="input input--hover" placeholder="Hint text" type="text" />

Error

Inline error message

Code

<label class="label">Label</label>
<input class="input input--error" placeholder="Hint text" type="text" />
<span class="input-message input-message--error">Inline error message</span>

Disabled

Code

<label class="label">Label</label>
<input class="input" disabled placeholder="Hint text" type="text" />

Email

Code

<label class="label">Label</label>
<input class="input" placeholder="Hint text" type="email" />