-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Inputs
Sanya Boriskin edited this page Aug 5, 2019
·
17 revisions
<div class="form-group">
<div class="input-group">
<input id="simple-input" required/>
<label class="control-label" for="simple-input">Text input</label><i class="bar"></i>
</div>
</div>
<div class="form-group with-icon-right" :class="{'has-error': errors.has('successfulEmail'), 'valid': isSuccessfulEmailValid}">
<div class="input-group">
<input
id="successfulEmail"
name="successfulEmail"
v-model="successfulEmail"
v-validate="'required|email'"
required/>
<i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label" for="successfulEmail">Email (validated with success)</label><i class="bar"></i>
<small v-show="errors.has('successfulEmail')" class="help text-danger">
{{ errors.first('successfulEmail') }}
</small>
</div>
</div>
Dynamically add
has-error
orvalid
to form-group container to show current validity of input.
Addwith-icon-right
class orwith-icon-left
to form-group container for positioning desired icon (also add icon insideinput-group
withicon-left
oricon-right
class)
Add<small class="help"></small>
element insideinput-group
to show description under input. You can add styling liketext-secondary
ortext-danger
and so on.
<div class="form-group">
<div class="input-group">
<textarea type="text" id="simple-textarea" required></textarea>
<label class="control-label" for="simple-textarea">Textarea</label><i class="bar"></i>
</div>
</div>
<div class="form-group form-group-w-btn">
<div class="input-group">
<input id="input-w-btn" required/>
<label class="control-label" for="input-w-btn">Input with button</label><i class="bar"></i>
</div>
<div class="btn btn-micro btn-primary">UPLOAD</div>
</div>
Just add
form-group-w-btn
class toform-group
container and put button inside of it.