Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of Nuxt forms.
Overview
Be sure to use an appropriate type attribute on all inputs (e.g., email
for email address or number
for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.
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.
Be sure to explore our custom forms to further style <select>
s. You can use the base-input
component and the default slot which will act like a div with form-group
class.
<card>
<form @ submit.prevent >
<base-input label= "Email address"
type= "email"
placeholder= "Enter email" >
</base-input>
<base-input label= "Example select" >
<select class= "form-control" id= "exampleFormControlSelect1" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</base-input>
<base-input label= "Example multiple select" >
<select multiple class= "form-control" id= "exampleFormControlSelect2" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option> 5</option>
</select>
</base-input>
<base-input label= "Example textarea" >
<textarea class= "form-control" id= "exampleFormControlTextarea1" rows= "3" ></textarea>
</base-input>
</form>
</card>
Examples
<card>
<base-input class= "has-success" value= "Success" >
</base-input>
</card>
<card>
<base-input class= "has-danger" value= "Error" >
</base-input>
</card>
<card>
<base-input addon-left-icon= "tim-icons icon-single-02" placeholder= "With nucleo icon" >
</base-input>
</card>
<card>
<base-input addon-left-icon= "fab fa-dribbble" placeholder= "With font awesome icon" >
</base-input>
</card>
Checkboxes and radios
<template>
<div>
<base-checkbox class= "mb-3" v-model= "checkboxes.unchecked" >
Unchecked
</base-checkbox>
<base-checkbox class= "mb-3" v-model= "checkboxes.checked" >
Checked
</base-checkbox>
<base-checkbox class= "mb-3" v-model= "checkboxes.uncheckedDisabled" disabled >
Unchecked
</base-checkbox>
<base-checkbox class= "mb-3" v-model= "checkboxes.checkedDisabled" disabled >
Checked
</base-checkbox>
</div>
</template>
<script>
export default {
data (){
return {
checkboxes : {
unchecked : false ,
checked : true ,
uncheckedDisabled : false ,
checkedDisabled : true
}
}
}
}
</script>
<template>
<div>
<base-radio name= "radio0" class= "mb-3" v-model= "radio.radio1" >
Unchecked
</base-radio>
<base-radio name= "radio1" class= "mb-3" v-model= "radio.radio1" >
Checked
</base-radio>
<base-radio name= "radio2" class= "mb-3" v-model= "radio.radio2" disabled >
Disabled unchecked
</base-radio>
<base-radio name= "radio3" class= "mb-3" v-model= "radio.radio2" disabled >
Disabled checked
</base-radio>
</div>
</template>
<script>
export default {
data (){
return {
radio : {
radio1 : " radio1 " ,
radio2 : " radio3 "
}
}
}
}
</script>
Inline
<template>
<div>
<base-checkbox inline class= "mb-3" v-model= "checkboxes.unchecked" >
Unchecked
</base-checkbox>
<base-checkbox inline class= "mb-3" v-model= "checkboxes.checked" >
Checked
</base-checkbox>
</div>
</template>
<script>
export default {
data (){
return {
checkboxes : {
unchecked : false ,
checked : true
}
}
}
}
</script>
<template>
<div>
<base-radio inline name= "radio0" class= "mb-3" v-model= "radio.radio1" >
Unchecked
</base-radio>
<base-radio inline name= "radio1" class= "mb-3" v-model= "radio.radio1" >
Checked
</base-radio>
</div>
</template>
<script>
export default {
data (){
return {
radio : {
radio1 : " radio1 " ,
radio2 : " radio3 "
}
}
}
}
</script>
Layout
Since Bootstrap applies display: block
and width: 100%
to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<card>
<form>
<div class= "row" >
<div class= "col" >
<base-input type= "text" placeholder= "First name" />
</div>
<div class= "col" >
<base-input type= "text" placeholder= "Last name" />
</div>
</div>
</form>
</card>
You may also swap .row
for .form-row
, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
<card>
<form>
<div class= "form-row" >
<div class= "col" >
<base-input type= "text" placeholder= "First name" />
</div>
<div class= "col" >
<base-input type= "text" placeholder= "Last name" />
</div>
</div>
</form>
</card>
More complex layouts can also be created with the grid system.
<card>
<form>
<div class= "form-row" >
<base-input class= "col-md-6" type= "email" label= "Email" placeholder= "Email" />
<base-input class= "col-md-6" type= "password" label= "Password" placeholder= "Password" />
</div>
<base-input type= "text" label= "Address" placeholder= "1234 Main St" />
<base-input type= "text" label= "Address 2" placeholder= "Apartment, studio, or floor" />
<div class= "form-row" >
<base-input class= "col-md-6" label= "City" placeholder= "City" />
<base-input class= "col-md-4" label= "State" >
<select id= "inputState" class= "form-control" >
<option selected > Choose...</option>
<option> ...</option>
</select>
</base-input>
<base-input class= "col-md-2" label= "Zip" placeholder= "Zip" />
</div>
<base-input>
<base-checkbox> Check me out</base-checkbox>
</base-input>
<base-button type= "primary" native-type= "Submit" > Sign in</base-button>
</form>
</card>
Add the disabled
boolean attribute on an input to prevent user interactions and make it appear lighter.
<card>
<form @ submit.prevent >
<fieldset disabled >
<base-input label= "Disabled input" placeholder= "Disabled input" ></base-input>
<base-input label= "Disabled select" >
<select id= "disabledSelect" class= "form-control" >
<option> Disabled select</option>
</select>
</base-input>
<base-checkbox> Can't check me out</base-checkbox>
<base-button type= "primary" native-type= "submit" > Submit</base-button>
</fieldset>
</form>
</card>
Cross browser compatibility
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled attribute on a <fieldset>
. Use custom JavaScript to disable the fieldset in these browsers.
PROP NAME
TYPE
DEFAULT
DESCRIPTION
required
Boolean
N/A
label
String
N/A
input label
error
String
N/A
input error
value
String
Number
N/A
input value
addonRightIcon
String
N/A
input icon on the right
addonLeftIcon
String
N/A
input icon on the left
SLOT
DESCRIPTION
label
Input label
addonLeft
Addon left slot (before input text)
addonRight
Addon right slot (after input text)
default
Default content (replacing default input component)
error
Error slot (displayed below input)
helperText
Helper text displayed below input
NAME
DESCRIPTION
PARAMS
input
triggers when the binding value changes (default for v-model)
the updated value
Base Checkbox props
PROP NAME
TYPE
DEFAULT
DESCRIPTION
checked
Array
Boolean
N/A
disabled
Boolean
N/A
inline
Boolean
N/A
hasError
Boolean
N/A
Base checkbox slots
SLOT
DESCRIPTION
default
Default content (text to the right of the icon)
Base checkbox events
NAME
DESCRIPTION
PARAMS
input
triggers when the binding value changes (default for v-model)
the updated value
Base Radio props
PROP NAME
TYPE
DEFAULT
DESCRIPTION
name
String
Number
N/A
Radio label
disabled
Boolean
N/A
Whether radio is disabled
value
String
Boolean
N/A
Radio value
inline
Boolean
N/A
Whether radio is inline
Base Radio slots
SLOT
DESCRIPTION
default
Default content (text to the right of the icon)
Base radio events
NAME
DESCRIPTION
PARAMS
input
triggers when the binding value changes (default for v-model)
the updated value