Examples and usage guidelines for form control styles, layout
options, and custom components for creating a wide variety of forms.
Default
<form>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "[email protected] " ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Regular" disabled ></base-input>
</div>
</div>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "Search" addonLeftIcon= "ni ni-zoom-split-in" ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Birthday" addonRightIcon= "ni ni-zoom-split-in" ></base-input>
</div>
</div>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "Success" :valid= "true" ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Error input" :valid= "false" ></base-input>
</div>
</div>
</form>
Alternative
If you want to use forms on grayish background colors, you can use
this beautiful alternative style which removes the borders and it is
emphasized only by its shadow.
<form>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "[email protected] " alternative ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Regular" disabled alternative ></base-input>
</div>
</div>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "Search" addonLeftIcon= "ni ni-zoom-split-in" alternative ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Birthday" addonRightIcon= "ni ni-zoom-split-in" alternative ></base-input>
</div>
</div>
<div class= "row" >
<div class= "col-md-6" >
<base-input placeholder= "Success" :valid= "true" alternative ></base-input>
</div>
<div class= "col-md-6" >
<base-input placeholder= "Error input" :valid= "false" alternative ></base-input>
</div>
</div>
</form>
Muted
Remove all borders and shadows so you can use it inside other
elements:
<base-input placeholder= "Muted input" inputClasses= "form-control-muted" ></base-input>
Textual form controls—like
<input>
s,
<select>
s, and
<textarea>
s—are styled with the
.form-control
class. Included are styles for general appearance, focus state,
sizing, and more.
For all form control you can apply the additional modifier classes
explained in the Inputs section:
.form-control-alternative
,
.form-control-flush
and
.form-control-muted
.
<form>
<div class= "form-group" >
<base-input type= "email" placeholder= "[email protected] " label= "Email address" ></base-input>
</div>
<div class= "form-group" >
<label for= "exampleFormControlSelect1" > Example select</label>
<select class= "form-control" id= "exampleFormControlSelect1" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
<div class= "form-group" >
<label for= "exampleFormControlSelect2" > Example multiple select</label>
<select multiple class= "form-control" id= "exampleFormControlSelect2" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</div>
<div class= "form-group" >
<label for= "exampleFormControlTextarea1" > Example textarea</label>
<textarea class= "form-control" id= "exampleFormControlTextarea1" rows= "3" ></textarea>
</div>
</form>
File browser
<form>
<div class= "custom-file" >
<base-input type= "file" inputClasses= "custom-file-input" id= "customFileLang" lang= "en" ></base-input>
<label class= "custom-file-label" for= "customFileLang" > Select file</label>
</div>
</form>
<form>
<div class= "form-group" >
<base-input type= "text" value= "John Snow" label= "Text" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "search" value= "Tell me your secret ..." label= "Search" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "email" value= "@example.com" label= "Email" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "url" value= "" label= "URL" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "tel" value= "40-(770)-888-444" label= "Phone" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "password" value= "password" label= "Password" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "number" value= "23" label= "Number" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "datetime-local" value= "2018-11-23T10:30:00" label= "Datetime" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "date" value= "2018-11-23" label= "Date" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "month" value= "2018-11" label= "Month" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "week" value= "2018-W23" label= "Week" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "time" value= "10:30:00" label= "Time" ></base-input>
</div>
<div class= "form-group" >
<base-input type= "color" value= "#5e72e4" label= "Color" ></base-input>
</div>
</form>
Sizing
<base-input placeholder= ".form-control-lg" inputClasses= "form-control-lg" ></base-input>
<base-input placeholder= "Default input" ></base-input>
<base-input placeholder= ".form-control-sm" inputClasses= "form-control-sm" ></base-input>
Large select
Default select
Small select
<select class= "form-control form-control-lg" >
<option> Large select</option>
</select>
<select class= "form-control" >
<option> Default select</option>
</select>
<select class= "form-control form-control-sm" >
<option> Small select</option>
</select>
For even more customization and cross browser consistency, use our
completely custom form elements to replace the browser defaults.
They’re built on top of semantic and accessible markup, so they’re
solid replacements for any default form control.
Checkboxes
<base-checkbox class= "mb-3" >
Check this custom checkbox
</base-checkbox>
Radios
<base-radio name= "radio0" class= "mb-3" v-model= "radio.radio1" >
Toggle this custom radio
</base-radio>
<base-radio name= "radio1" class= "mb-3" v-model= "radio.radio1" >
Or toggle this other custom radio
</base-radio>
Inline
<base-radio inline name= "radio0" class= "mb-3" v-model= "radio.radio1" >
Toggle this custom radio
</base-radio>
<base-radio inline name= "radio1" class= "mb-3" v-model= "radio.radio1" >
Or toggle this other custom radio
</base-radio>
Disabled
<base-checkbox class= "mb-3" disabled >
Check this custom checkbox
</base-checkbox>
<base-radio class= "mb-3" disabled >
Toggle this custom radio
</base-radio>
Toggles
<base-switch v-model= "switches.primary" offText= "" onText= "" type= "primary" ></base-switch>
<script>
export default {
data () {
return {
switches : {
primary : true
}
}
}
}
</script>
Labeled toggles
<base-switch v-model= "switches.primary" type= "primary" ></base-switch>
<script>
export default {
data () {
return {
switches : {
primary : true
}
}
}
}
</script>
Sliders
<!-- Simple slider -->
<base-slider v-model= "sliders.slider1" >
</base-slider>
<!-- Range slider -->
<div class= "mt-5" >
<!-- Range slider container -->
<base-slider v-model= "sliders.slider2" :range= "{min: 0, max: 500}" >
</base-slider>
</div>
<script>
export default {
data (){
return {
sliders : {
slider1 : 0 ,
slider2 : [ 150 , 400 ]
}
}
}
}
</script>