Documentation
Basic
Extended
Blocks

Form

Basic form styles are give below - field comes with three sizes. By default all form fields are 100% width - so it's depends on container size. Form input's have default style, hover and focus style.



Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label for="exampleName1" class="form-label">Name</label>
    <input type="text" name="exampleName1" id="exampleName1" class="form-input" placeholder="e.g James smith">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label for="exampleCountry1" class="form-label">Select country</label>
    <select name="exampleCountry1" id="exampleCountry1" class="form-select">
        <option value="US">United state</option>
        <option value="UK">United Kingdom</option>
    </select>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label for="examplePhoto1" class="form-label">Upload photo</label>
    <input type="file" name="examplePhoto1" id="examplePhoto1" class="form-file">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
<div class="form-field">
    <label class="form-checkbox-label small"><input type="checkbox" class="form-check-input"> I agree with the <a href="">terms and conditions</a> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium commodi ea aliquam nisi illo eligendi facere, iure voluptates recusandae, dolorum harum. Explicabo cum, libero molestias eaque debitis asperiores, sint ratione.</label>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label class="form-label">Select gender</label>
    <div class="form-radio-items">
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio"> Male</label>
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio"> Female</label>
        <label class="form-radio-item"><input type="radio" name="gender1" class="form-radio" disabled> <span class="dimmed">No gender</span></label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field vertical">
    <label class="form-label">Select gender</label>
    <div class="form-radio-items">
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> Male</label>
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> Female</label>
        <label class="form-radio-item"><input type="radio" name="gender2" class="form-radio"> No gender</label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label for="message" class="form-label">Message</label>
    <textarea name="message" id="message" class="form-textarea" placeholder="e.g Write something here!"></textarea>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
<div class="form-field">
    <label for="default_size" class="form-label">Default field</label>
    <input type="text" name="default_size" id="default_size" class="form-input" placeholder="e.g Default field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field small">
    <label for="small_field" class="form-label">Small field</label>
    <input type="text" name="small_field" id="small_field" class="form-input" placeholder="e.g Small field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field large">
    <label for="large_field" class="form-label">Large field</label>
    <input type="text" name="large_field" id="large_field" class="form-input" placeholder="e.g Large field">
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>

<div class="form-field">
    <label for="disabled_field" class="form-label">Readonly field</label>
    <input type="text" name="disabled_field" id="disabled_field" class="form-input" placeholder="e.g Disabled field" readonly>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Your error message here!
Any success message here.
Field is fine with some warning 
<div class="form-field error"></div>
<div class="form-field success"></div>
<div class="form-field warning"></div>


Form horizontal
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 


<div class="row">
    <div class="columns large-3">
        <label for="name1" class="form-label right">Name</label>
    </div>
    <div class="columns large-4">
        <div class="form-field">
            <input type="text" name="name1" id="name1" class="form-input" placeholder="e.g James smith">
            <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
        </div>
    </div>
    <div class="columns large-3 newrow">
        <label for="email1" class="form-label right">Email address</label>
    </div>
    <div class="columns large-4">
        <div class="form-field">
            <input type="email" name="email1" id="email1" class="form-input" placeholder="e.g james@example.com">
            <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
        </div>
    </div>
    <div class="columns large-4 large-offset-3 newrow">
        <button type="submit" class="button button-primary">Send message</button>
    </div>
</div>


Form primary style

Just add form-primary to form tag!



<form action="" class="form form-primary">
// Your html here
</form>
Search field




<div class="form-field form-field-search small">
    <span class="form-field-search-icon"><i class="icon icon-search icon-small"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>

<div class="form-field form-field-search">
    <span class="form-field-search-icon"><i class="icon icon-search"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>

<div class="form-field form-field-search large">
    <span class="form-field-search-icon"><i class="icon icon-search"></i></span>
    <input type="text" name="" class="form-input" placeholder="Search ...">
</div>
Search field with loading state
<div class="form-field form-field-search loading">
    <i class="form-field-search-icon ion-search"></i>
    <input type="text" name="" class="form-input" placeholder="Search ...">
    <i class="form-field-search-loading-icon"></i>
</div>
Search field with loading and autocomplete state





























<div class="form-field form-field-search loading hint">
    <i class="form-field-search-icon ion-search"></i>
    <input type="text" name="" class="form-input" placeholder="Search ...">
    <i class="form-field-search-loading-icon"></i>

    <div class="form-field-search-hint">
        <ul>
            <li><a href="#">Afganistan</a></li>
            <li><a href="#">Srilanka <span class="badge badge-info">new</span></a></li>
            <li><a href="#">Bangladesh</a></li>
            <li><a href="#">United state</a></li>
        </ul>
    </div>
</div>

If you're looking for tag implementation, then see this.


SASS

Reference from _form.scss

$form-input-radius: $global-border-radius !default;
:root {
    --r-form-input-placeholder-color: var(--r-color-light-lighten-30);
    --r-form-input-background-color: var(--r-color-dark);
    --r-form-input-color: var(--r-color-white);
    --r-form-input-border-color: var(--r-color-dark-lighten-5);
    --r-form-input-hover-border-color: var(--r-color-link);
    --r-form-input-focus-border-color: var(--r-color-primary);
    --r-form-text-color: var(--r-color-light-lighten-15);
    --r-form-checkbox-label-color: var(--r-color-dark-lighten-20);
    --r-form-disable-input-color: var(--r-color-light-lighten-5);
    --r-form-primary-color: var(--r-color-light-lighten-2);
    --r-form-primary-border-color: var(--r-color-light-lighten-5);
    --r-form-primary-hover-color: var(--r-color-info);
    --r-form-primary-focus-color: var(--r-color-white);
    --r-form-error-color: var(--r-color-danger);
    --r-form-success-color: var(--r-color-success);
    --r-form-warning-color: var(--r-color-info);
}