Forms

Use Impact Front’s form elements such as text inputs, textareas, file uploads and many more to get input from you users

Form example

The following example is a classical form for login or register pages:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group form-check mt-3">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label form-check-sign-white" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Select input

The following example is how the select inputs look and can be used:

Example select

<div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="custom-select" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
</div>

Multiple select

The following example is how the select inputs look and can be used:

Example multiple select

<div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="custom-select" id="exampleFormControlSelect2">
    <option>Bootstrap</option>
    <option>VueJs</option>
    <option>Angular</option>
    <option>React</option>
    <option>NodeJs</option>
    </select>
</div>

Textarea

The following example is how textareas can be used:

Example textarea

<div class="form-group">
    <label for="exampleFormControlTextarea2">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
</div>

File upload

The following example is how file uploads can be used:

Choose file

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Checkboxes

Square style

Check me out

Disabled checkbox

Disabled checked

<div class="form-group form-check mt-3">
    <input type="checkbox" class="form-check-input" id="exampleCheck2">
    <label class="form-check-label form-check-sign-white" for="exampleCheck2">Check me out</label>
</div>
<div class="form-group form-check mt-3">
    <input type="checkbox" class="form-check-input" id="exampleCheck3" checked>
    <label class="form-check-label form-check-sign-white" for="exampleCheck3">Check me out</label>
</div>
<div class="form-group form-check mt-3">
    <input type="checkbox" class="form-check-input" id="exampleCheck4" disabled>
    <label class="form-check-label form-check-sign-white" for="exampleCheck4">Disabled checkbox</label>
</div>
<div class="form-group form-check mt-3">
    <input type="checkbox" class="form-check-input" id="exampleCheck5" disabled checked>
    <label class="form-check-label form-check-sign-white" for="exampleCheck5">Disabled checked</label>
</div>

Radio buttons

Radio example

Radio example 2

Radio example checked

Radio example disabled

<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
    <label class="form-check-label" for="exampleRadios1">Radio example</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">Radio example 2</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" checked>
    <label class="form-check-label" for="exampleRadios3">Radio example checked</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" disabled>
    <label class="form-check-label" for="exampleRadios4">Radio example disabled</label>
</div>