3 #Forms Forms
Build simple forms with labels, inputs, errors and option groups.
Source:
3_Form/forms.less, line 1
3.1 #Forms.Inputs and labels Inputs and labels
To apply styles, add cs-text-box to <input> or <textarea> elements.
Example
Markup
<div class="cs-form-group">
<label class="field-label">Name</label>
<input type="text" class="cs-text-box w-100">
</div>
<div class="cs-form-group">
<label class="field-label">Bio</label>
<textarea class="cs-text-box w-100"></textarea>
</div>
Source:
3_Form/forms.less, line 9
3.2 #Forms.Disabled inputs Disabled inputs
Disabled styles are applied if the :disabled class is applied.
Example
Markup
<div class="cs-form-group">
<label class="field-label">Name</label>
<input type="text" class="cs-text-box w-100" disabled>
</div>
<div class="cs-form-group">
<label class="field-label">Bio</label>
<textarea class="cs-text-box w-100" disabled></textarea>
</div>
Source:
3_Form/forms.less, line 27
3.3 #Forms.Errors Errors
Error styles are applied when .has-error or .invalid classes match.
Example
Something went wrong!
Markup
<div class="cs-form-group">
<label class="field-label">Name</label>
<input type="text" class="cs-text-box w-100 has-error">
<span class="invalid">Something went wrong!</span>
</div>
Source:
3_Form/forms.less, line 45
3.4 #Forms.Option checkbox Option checkbox
Add .cs inside .cs-checkbox to <input type="checkbox"> elements to apply the styles.
Example
Markup
<div class="cs-checkbox">
<label>
<input type="checkbox" class="cs">
<span class="lbl">Check this</span>
</label>
</div>
<div class="cs-checkbox">
<label>
<input type="checkbox" class="cs" checked>
<span class="lbl">Or check that</span>
</label>
</div>
<div class="cs-checkbox">
<label>
<input type="checkbox" class="cs" disabled>
<span class="lbl">This option is disabled</span>
</label>
</div>
Source:
3_Form/forms.less, line 60
3.5 #Forms.Option Radio Option Radio
Add .cs inside .cs-checkbox to <input type="radio"> elements to apply the styles.
Example
Markup
<div class="cs-checkbox">
<label>
<input type="radio" class="cs" name="radio">
<span class="lbl">Member</span>
</label>
<label>
<input type="radio" class="cs" name="radio" checked>
<span class="lbl">Admin</span>
</label>
</div>
Source:
3_Form/forms.less, line 88