Simple Inputs
Simple inputs gives an idea of what's input boxes look like in SLEEK UI
<label class="form-label" for="email">Email *</label>
<input class="form-field" type="email" name="email" id="email" required>
<label class="form-label" for="text-area">Enter your query here: *</label>
<textarea class="form-field form-text-area" name="text-area" id="text-area" rows="5"></textarea>
Input validations
Inputs validations enhance the inputs with particular state of the input. SLEEK UI provides three states error-field
warning-field
success-field
Your password is incorrect
Your password is weak
Your password is strong
<label class="form-label error-label" for="password-error-example">Password *</label>
<input class="form-field error-field" type="password" name="password-error-example" id="password-error-example">
<div class="form-text error-text">Your password is incorrect</div>
<label class="form-label warning-label" for="password-warning-example">Password *</label>
<input class="form-field warning-field" type="password" name="password-warning-example" id="password-warning-example">
<div class="form-text warning-text">Your password is weak</div>
<label class="form-label success-label" for="password-success-example">Password *</label>
<input class="form-field success-field" type="password" name="password-success-example" id="password-success-example">
<div class="form-text success-text">Your password is strong</div>
Radio Input
To use radio inputs use form-radio class
and for inline inputs wrap them in a container class input-container
<div class="input-container">
<label class="form-label" for="checked-radio-input">
<input class="form-radio" type="radio" name="radio-example" id="checked-radio-input" checked>
Checked
</label>
<label class="form-label" for="unchecked-radio-input">
<input class="form-radio" class="form-field" type="radio" name="radio-example" id="unchecked-radio-input">
Unchecked
</label>
<label class="form-label disabled-label" for="disabled-radio-input">
<input class="form-radio disabled" type="radio" name="radio-example" id="disabled-radio-input" disabled>
Disabled
</label>
</div>
Checkbox Input
To use checkbox inputs use form-checkbox class
and for inline inputs wrap them in a container class input-container
<div class="input-container">
<label class="form-label" for="checked-checkbox-input">
<input class="form-checkbox" type="checkbox" name="checkbox-example" id="checked-checkbox-input" checked>
Checked
</label>
<label class="form-label" for="unchecked-checkbox-input">
<input class="form-checkbox" type="checkbox" name="checkbox-example" id="unchecked-checkbox-input">
Unchecked
</label>
<label class="form-label disabled-label" for="disabled-checkbox-input">
<input class="form-checkbox disabled" type="checkbox" name="checkbox-example" id="disabled-checkbox-input" disabled>
Disabled
</label>
</div>