Forms How-To

XS Form Container

Max-width = 330px

[Column and form field markup]

                
<div class="container container--xs form-container">
    [Column and form field markup]
</div>

Small Form Container

Max-width = 428px

[Column and form field markup]

                
<div class="container container--small form-container">
    [Column and form field markup]
</div>

S Form Container

Max-width = 700px

[Column and form field markup]

                
<div class="container container--s form-container">
    [Column and form field markup]
</div>

Narrow Form Container

Max-width = 726px

[Column and form field markup]

                
<div class="container container--narrow form-container">
    [Column and form field markup]
</div>

MED Form Container

Max-width = 838px

[Column and form field markup]

                
<div class="container container--med form-container">
    [Column and form field markup]
</div>

LG Form Container

Max-width = 890px

[Column and form field markup]

                
<div class="container container--lg form-container">
    [Column and form field markup]
</div>

XL Form Container

Max-width = 948px

[Column and form field markup]

                
<div class="container container--xl form-container">
    [Column and form field markup]
</div>

Standard Form Container

Max-width = 1254px

[Column and form field markup]

                
<div class="container form-container">
    [Column and form field markup]
</div>

Fluid Container

Width = 100%

[Column and form field markup]

                
<div class="container-fluid form-container">
    [Column and form field markup]
</div>

Single-Column

[Form field markup]

                    
<div class="one-col">
    [Form field markup]
</div>

Double-Column

[Form field markup]

                    
<div class="two-col">
    [Form field markup]
    [Form field markup]
</div>

Text Input

Name

                    
<div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Name" />
</div>

Email Input

                    
<div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" placeholder="example@gmail.com" />
</div>

Tel Input

Phone

                    
<div class="form-group">
    <label>Phone</label>
    <input type="tel" class="form-control" placeholder="xxx - xxx - xxxx" />
</div>

Password Input

Password

                    
<div class="form-group">
    <label>Password</label>
    <div class="custom-password">
        <i class="far fa-eye pswd-visible-toggle"></i>
        <input type="password" class="form-control" />
    <div>
</div>

Date Input

Date

                    
<div class="form-group">
    <label>Date</label>
    <input type="date" class="form-control" />
</div>

Text Area

                    
<div class="form-group">
    <label>Text Area</label>
    <textarea class="form-control" placeholder="Leave a comment..."></textarea>
</div>

Radio Buttons

Radio 1

Radio 2

Radio 3

                    
<div class="form-group form-check-group">
    <div class="form-check">
        <input class="form-check-input" type="radio" checked />
        <label class="form-check-label radio-label">Radio 1</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" />
        <label class="form-check-label radio-label">Radio 2</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" />
        <label class="form-check-label radio-label">Radio 3</label>
    </div>
</div>

Checkboxes

Checkbox 1

Checkbox 2

                    
<div class="form-group form-check-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" />
        <label class="form-check-label">Checkbox 1</label>
    </div>
</div>
<div class="form-group form-check-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" />
        <label class="form-check-label">Checkbox 2</label>
    </div>
</div>

Toggle Switches

Toggle

                    
<div class="form-group form-check-group">
    <div class="form-check switch-toggle">
        <label class="form-check-label--switch">
            <input type="checkbox" />
            <span class="form-check-input__slider round"></span>
        </label>
        <div class="switch-toggle__label">
            <span>Toggle</span>
        </div>
    </div>
</div>

Dropdown

                    
<div class="form-group">
    <label>Dropdown</label>
    <div class="custom-select">
        <select class="form-control">
            <option value="">Choose</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
        </select>
    </div>
</div>

Range Slider

Slider

                    
<div class="form-group custom-range-group">
    <label>Slider</label>
    <div class="custom-range">
        <div class="custom-range__value-display">50</div>
        <input type="range" min="0" max="100" step="1" />
    </div>
</div>

Buttons

                    
<div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit" />
</div>

Text Input (floating label)

Name

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Name</label>
        <input type="text" class="form-control" />
    </div>
</div>

Email Input (floating label)

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Email</label>
        <input type="email" class="form-control" />
    </div>
</div>

Tel Input (floating label)

Phone Number

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Phone Number</label>
        <input type="tel" class="form-control" />
    </div>
</div>

Password Input (floating label)

Password

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Password</label>
        <i class="far fa-eye pswd-visible-toggle"></i>
        <input type="password" class="form-control" />
    </div>
</div>

Date Input (floating label)

Date

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Date</label>
        <input type="date" class="form-control" />
    </div>
</div>

Text Area (floating label)

Comment...

                    
<div class="form-group">
    <div class="floatLbl">
        <label>Comment...</label>
        <textarea class="form-control"></textarea>
    </div>
</div>

Dropdown (floating label)

Dropdown

                    
<div class="form-group">
    <div class="custom-select floatLbl">
        <label>Dropdown</label>
        <select class="form-control">
            <option value=""></option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
        </select>
    </div>
</div>