BootstrapVue Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of BootstrapVue forms.

Inputs

Default

<base-input placeholder="Default input"/>

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.

<div class="p-4 bg-secondary">
  <b-input placeholder="Alternative input" class="form-control-alternative"/>
</div>

Flush

Remove all borders and shadows so you can use it inside other elements:

<b-input placeholder="Fulshed input" class="form-control-flush"/>

Muted

Remove all borders and shadows so you can use it inside other elements:

<b-input placeholder="Muted input" class="form-control-muted"/>

Form controls

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.

<b-card-body>
  <form>
    <base-input label="Email address" placeholder="[email protected]"/>

    <base-input label="Example select">
      <select class="form-control">
        <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">
        <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="exampleFormControlTextarea3" rows="3"></textarea>
    </base-input>
  </form>
</b-card-body>

File browser

<b-card no-body>
  <!-- Card header -->
  <b-card-header class="card-header">
    <h3 class="mb-0">File browser</h3>
  </b-card-header>
  <!-- Card body -->
  <b-card-body class="card-body">
    <b-form>
      <b-form-file
        @change="filesChange"
        placeholder="Select file"
        drop-placeholder="Drop file here..."
      ></b-form-file>
    </b-form>
  </b-card-body>
</b-card>

HTML5 inputs

Text

URL

Phone

Password

Number

Datetime

Date

Month

Week

Time

Color

<form>
  <b-row class="form-group">
    <label class="col-md-2 col-form-label form-control-label">Text</label>
    <b-col md="10">
      <base-input placeholder="Jon Snow"></base-input>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-search-input" class="col-md-2 col-form-label form-control-label">Search</label>
    <b-col md="10">
      <base-input id="example-search-input" placeholder="Tell me your secret ..."></base-input>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-email-input" class="col-md-2 col-form-label form-control-label">Email</label>
    <b-col md="10">
      <base-input type="email" autocomplete="username email" placeholder="[email protected]" id="example-email-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-url-input" class="col-md-2 col-form-label form-control-label">URL</label>
    <b-col md="10">
      <base-input type="url" placeholder="https://www.creative-tim.com" id="example-url-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-tel-input" class="col-md-2 col-form-label form-control-label">Phone</label>
    <b-col md="10">
      <base-input type="tel" placeholder="40-(770)-888-444" id="example-tel-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-password-input"
           class="col-md-2 col-form-label form-control-label">Password</label>
    <b-col md="10">
      <base-input type="password" autocomplete="current-password" placeholder="password" id="example-password-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-number-input" class="col-md-2 col-form-label form-control-label">Number</label>
    <b-col md="10">
      <base-input type="number" placeholder="23" id="example-number-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-datetime-local-input" class="col-md-2 col-form-label form-control-label">Datetime</label>
    <b-col md="10">
      <base-input type="datetime-local" value="2018-11-23T10:30:00" id="example-datetime-local-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-date-input" class="col-md-2 col-form-label form-control-label">Date</label>
    <b-col md="10">
      <base-input type="date" value="2018-11-23" id="example-date-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-month-input" class="col-md-2 col-form-label form-control-label">Month</label>
    <b-col md="10">
      <base-input type="month" value="2018-11" id="example-month-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-week-input" class="col-md-2 col-form-label form-control-label">Week</label>
    <b-col md="10">
      <base-input type="week" value="2018-W23" id="example-week-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-time-input" class="col-md-2 col-form-label form-control-label">Time</label>
    <b-col md="10">
      <base-input type="time" value="10:30:00" id="example-time-input"/>
    </b-col>
  </b-row>
  <b-row class="form-group">
    <label for="example-color-input" class="col-md-2 col-form-label form-control-label">Color</label>
    <b-col md="10">
      <base-input type="color" value="#5e72e4" id="example-color-input"/>
    </b-col>
  </b-row>
</form>

Sizing

<base-input input-classes="form-control-lg" placeholder=".form-control-lg"/>
<base-input placeholder="Default input"/>
<base-input input-classes="form-control-sm" placeholder=".form-control-sm"/>

<base-input>
  <select class="form-control form-control-lg">
    <option>Large select</option>
  </select>
</base-input>

<base-input>
  <select class="form-control">
    <option>Default select</option>
  </select>
</base-input>

<base-input>
  <select class="form-control form-control-sm">
    <option>Small select</option>
  </select>
</base-input>

Custom forms

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

Check this custom checkbox

<b-form-checkbox
  id="checkbox-1"
  v-model="status"
  name="checkbox-1"
  value="accepted"
  unchecked-value="not_accepted"
  >
  Check this custom checkbox
</b-form-checkbox>

Radios

Toggle this custom radio

Or toggle this other custom radio

<b-form-group label="Individual radios">
<b-form-radio v-model="selected" name="some-radios" value="A">Toggle this custom radio</b-form-radio>
<b-form-radio v-model="selected" name="some-radios" value="B">Or toggle this other custom radio</b-form-radio>
</b-form-group>

Inline

Toggle this custom radio

Or toggle this other custom radio

<b-form-group label="Inline">
  <b-form-radio class="custom-control-inline" v-model="selected" name="some-radios" value="A">Toggle this custom radio</b-form-radio>
  <b-form-radio class="custom-control-inline" v-model="selected" name="some-radios" value="B">Or toggle this other custom radio</b-form-radio>
</b-form-group>

Disabled

Check this custom checkbox

Toggle this custom radio

<b-form-group label="Individual radios">
  <b-form-checkbox v-model="selected" name="some-radios" disabled value="B">Check this custom checkbox</b-form-checkbox>
  <b-form-radio v-model="selected" name="some-radios" disabled value="A">Toggle this custom radio</b-form-radio>
</b-form-group>

Toggles

<base-switch class="mr-1" on-text="" off-text="" v-model="switches.primary"></base-switch>

Labeled toggles

<base-switch class="mr-1" v-model="switches.primary"></base-switch>

Sliders

<base-slider v-model="sliders.simple"></base-slider>

<b-row class="mt-3">
  <b-col cols="6"><span class="range-slider-value"></span></b-col>
</b-row>

<base-slider class="mt-5" v-model="sliders.range" :range="{min: 100, max: 500}"></base-slider>
<b-row class="mt-3">
  <b-col cols="6">
    <span class="range-slider-value"></span>
  </b-col>
  <b-col cols="6" class="text-right">
    <span class="range-slider-value value-high"></span>
  </b-col>
</b-row>
</card>

Base Input props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
required	Boolean	N/A	Whether input is required (adds an asterix *)
group	Boolean	N/A	Whether input is an input group (manual override in special cases)
alternative	Boolean	N/A	Whether input is of alternative layout
label String	N/A	Input	label (text before input)
error String	N/A	Input	error (below input)
successMessage	String	N/A	Input success message
labelClasses	String	form-control-label	Input label css classes
inputClasses	String	N/A	Input css classes
inputGroupClasses	String	N/A	Input group css classes
value	String / Number	N/A	Input value
type	String	text	Input type
appendIcon	String	N/A	Append icon (right)
prependIcon	String	N/A	Prepend icon (left)
rules	String / Array / Object	N/A	Vee validate validation rules
name	String	N/A	Input name (used for validation)

Base Input slots

SLOT	DESCRIPTION
label	Input label
prepend	Addon left slot (before input text)
append	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

Base input events

NAME	DESCRIPTION	PARAMS
input	triggers when the binding value changes (default for v-model)	the updated value
focus	triggers when input is focused	(evt) browser event
blur	triggers when input is blurred	(evt) browser event

Base Checkbox props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
checked	Array / Boolean	N/A	Whether checkbox is checked
disabled	Boolean	N/A	Whether checkbox is disabled
inline	Boolean	N/A	Whether checkbox is inline
inputClasses	String / Object / Array	N/A	Checkbox input classes
type	String	N/A	Checkbox type (e.g info, danger etc)

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

Slider plugin props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
value	String / Array / Number	N/A	slider value
disabled	Boolean	N/A	whether the slider is disabled
start	Number / Array	N/A	noUi Slider start
connect	Boolean / Array	[ true, false ]	noUi Slider connect
range	Object	{ “min”: 0, “max”: 100 }	noUi Slider range
options	Object	{}	noUi Slider options

If you want to see more examples and properties please check the official BootstrapVue Documentation.