Inputs
Input fields
Most of form elements are styled based on their type attribute rather than a class. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
input type="text" placeholder="Please enter your username"
<input type="text" placeholder="Please enter your username" />Textarea
Set rows attribute for height sizing.
textarea rows="4" placeholder="Enter a comment"
<textarea rows="4" placeholder="Enter a comment"></textarea>File uploads
Wrap input[type="file"] with label.c-input-file class to hide a default style. If you want use our fancy button, add .c-btn classes.
label.c-input-file.c-btn.-with-icon
i.kzicon.kzicon-upload
| Choose a image
input type="file"
label.c-input-file.c-btn.-shape-rounded
i.kzicon.kzicon-upload
input type="file"
<label class="c-input-file c-btn -with-icon"><i class="kzicon kzicon-upload"></i>Choose a image<input type="file" /></label><label class="c-input-file c-btn -shape-rounded"><i class="kzicon kzicon-upload"></i><input type="file" /></label>Sizing
All text-based <input> and <textarea> elements are set to width: 100%; by default.
You can size inputs using grid columns (like .c-col--md-4, .c-col--sm-6) or any custom wrapper elements.
.c-form-group
label Default
input type="text" placeholder="width: 100%"
.c-row
.c-col--md-6
.c-form-group
label Grid column
input type="text" placeholder=".c-col--md-6"
/! DO NOT USE ANY STYLE ATTRIBUTES!!!
div style="width: 200px"
.c-form-group
label Custom wrapper
input type="text" placeholder="width: 200px"
<div class="c-form-group">
<label>Default</label><input type="text" placeholder="width: 100%" />
</div>
<div class="c-row">
<div class="c-col--md-6">
<div class="c-form-group">
<label>Grid column</label><input type="text" placeholder=".c-col--md-6" />
</div>
</div>
</div>
<!--DO NOT USE ANY STYLE ATTRIBUTES!!!-->
<div style="width: 200px">
<div class="c-form-group">
<label>Custom wrapper</label><input type="text" placeholder="width: 200px" />
</div>
</div>And you can size inputs with size attributes.
.c-form-group
label
| Size="2"
input type="text" size="2" maxlength="2"
.c-form-group
label
| Size="10"
input type="text" size="10" maxlength="2"
.c-form-group
label
| Size="20"
input type="text" size="20" maxlength="2"
<div class="c-form-group">
<label>Size="2"<input type="text" size="2" maxlength="2" /></label>
</div>
<div class="c-form-group">
<label>Size="10"<input type="text" size="10" maxlength="2" /></label>
</div>
<div class="c-form-group">
<label>Size="20"<input type="text" size="20" maxlength="2" /></label>
</div>If you need other sized inputs, add .-width-medium, .-width-short and .width-wide classes.
.c-form-group
label Short fixed width
input.-width-short type="text" placeholder="200px width"
.c-form-group
label Normal Fixed width
input.-width-medium type="text" placeholder="340px width"
.c-form-group
label Long fixed width
input.-width-wide type="text" placeholder="540px width"
<div class="c-form-group">
<label>Short fixed width</label><input class="-width-short" type="text" placeholder="200px width" />
</div>
<div class="c-form-group">
<label>Normal Fixed width</label><input class="-width-medium" type="text" placeholder="340px width" />
</div>
<div class="c-form-group">
<label>Long fixed width</label><input class="-width-wide" type="text" placeholder="540px width" />
</div>If you need a less padding input (having same height as a dropdown), add a .-size-compact class.
.c-form-group
label Compact
input.-size-compact type="text" placeholder="compact text field"
<div class="c-form-group">
<label>Compact</label><input class="-size-compact" type="text" placeholder="compact text field" />
</div>Focus state
input#focusedInputForDemo type="text" placeholder="Demonstrative focus state"
<input id="focusedInputForDemo" type="text" placeholder="Demonstrative focus state" />
The above example input uses custom styles in our documentation to demonstrate the
:focus state. (#focusedInputForDemo)
Disabled & Readonly state
Add the disabled or readonly boolean attribute on an input to prevent user input.
Now, what's the difference between disabled and readonly?
A disabled form element does not receive focus and are skipped in tabbing navigation, on the other hand, a readonly elements can receive the focus and are included in tabbed navigation.
Another difference is that a disabled element does not send data on submit, but a readonly elements sends.
.c-form-group
label Disabled input
input type="text" value="You can't edit me and can't focus on me" disabled="disabled"
.c-form-group
label Readonly input
input type="text" value="You can't edit me but can focus on me" readonly="readonly"
<div class="c-form-group">
<label>Disabled input</label><input type="text" value="You can't edit me and can't focus on me" disabled="disabled" />
</div>
<div class="c-form-group">
<label>Readonly input</label><input type="text" value="You can't edit me but can focus on me" readonly="readonly" />
</div>Error state
Set .-is-error class to a <input> element.
This email address is already used. Try another one.
The password you entered is too short. Type more than 8 characters.
.c-form-group
label Email
input.-is-error type="text" value="info@kaizenplatform.com"
small.c-form-help.u-text-error This email address is already used. Try another one.
.c-form-group
label Password
input.-is-error type="password" placeholder="Set your password"
small.c-form-help.u-text-error The password you entered is too short. Type more than 8 characters.
<div class="c-form-group">
<label>Email</label><input class="-is-error" type="text" value="info@kaizenplatform.com" /><small class="c-form-help u-text-error">This email address is already used. Try another one.</small>
</div>
<div class="c-form-group">
<label>Password</label><input class="-is-error" type="password" placeholder="Set your password" /><small class="c-form-help u-text-error">The password you entered is too short. Type more than 8 characters.</small>
</div>With icons
Use .c-input-with-icon to show an icon inside a text input.
.c-form-group
.c-input--with-icon
input.-width-short type="text" value="" placeholder=""
i.kzicon.kzicon-credit-card
.c-form-group
.c-input--with-icon
input.-size-compact.-width-medium type="text" value="" placeholder="Search for members by username"
i.kzicon.kzicon-profile
.c-form-group
.c-input--with-icon
input.-size-compact.-width-short type="text" value="" placeholder="YYYY-MM-DD"
div style="display: none;"
i.kzicon.kzicon-calendar
<div class="c-form-group">
<div class="c-input--with-icon">
<input class="-width-short" type="text" value="" placeholder="" /><i class="kzicon kzicon-credit-card"></i>
</div>
</div>
<div class="c-form-group">
<div class="c-input--with-icon">
<input class="-size-compact -width-medium" type="text" value="" placeholder="Search for members by username" /><i class="kzicon kzicon-profile"></i>
</div>
</div>
<div class="c-form-group">
<div class="c-input--with-icon">
<input class="-size-compact -width-short" type="text" value="" placeholder="YYYY-MM-DD" />
<div style="display: none;"></div>
<i class="kzicon kzicon-calendar"></i>
</div>
</div>Ajax validation state (With badges)
Use .c-input--with-badge to show a badge inside a text input.
.c-form-group
label Email
.c-input--with-badge
input.-width-medium type="text" value="info@kaizenplatform.com"
.c-badge--success
i.kzicon.kzicon-check
.c-form-group
label Password
.c-input--with-badge
input.-width-medium type="password" value="123"
.c-badge--error
i.kzicon.kzicon-cancel
small.c-form-help.u-text-error Too short
<div class="c-form-group">
<label>Email</label>
<div class="c-input--with-badge">
<input class="-width-medium" type="text" value="info@kaizenplatform.com" />
<div class="c-badge--success">
<i class="kzicon kzicon-check"></i>
</div>
</div>
</div>
<div class="c-form-group">
<label>Password</label>
<div class="c-input--with-badge">
<input class="-width-medium" type="password" value="123" />
<div class="c-badge--error">
<i class="kzicon kzicon-cancel"></i>
</div>
</div>
<small class="c-form-help u-text-error">Too short</small>
</div>Text input with state
.c-form-group
label Email
.c-input--with-state.-success
input.-width-medium type="text" value="info@kaizenplatform.com"
.c-form-group
label Username
.c-input--with-state.-loading
input.-width-medium type="text" value="kaizen"
.c-form-group
label Password
.c-input--with-state.-error
input.-width-medium type="password" value=""
small.c-form-help.u-text-error Too short
<div class="c-form-group">
<label>Email</label>
<div class="c-input--with-state -success">
<input class="-width-medium" type="text" value="info@kaizenplatform.com" />
</div>
</div>
<div class="c-form-group">
<label>Username</label>
<div class="c-input--with-state -loading">
<input class="-width-medium" type="text" value="kaizen" />
</div>
</div>
<div class="c-form-group">
<label>Password</label>
<div class="c-input--with-state -error">
<input class="-width-medium" type="password" value="" />
</div>
<small class="c-form-help u-text-error">Too short</small>
</div>