Logo
Hi, Sean S

Textual and Value inputs 

<div>
   <b-form-input v-model="text" placeholder="Enter your name"></b-form-input>
   <div class="mt-2">Value: {{ text }}</div>
 </div>
Value:

Input type 

<b-container fluid>
   <b-row class="my-1" v-for="type in types" :key="type">
     <b-col sm="3">
       <label :for="`type-${type}`">Type {{ type }}:</label>
     </b-col>
     <b-col sm="9">
       <b-form-input :id="`type-${type}`" :type="type"></b-form-input>
     </b-col>
   </b-row>
 </b-container>

<b-form-input> defaults to a text input, but you can set the type prop to one of the supported native browser HTML5 types: text, password, email, number, url, tel, search, date, datetime, datetime-local, month, week, time, range, or color.

Control sizing 

<b-container fluid>
  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-small">Small:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-small" size="sm" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-default">Default:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-default" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="2">
      <label for="input-large">Large:</label>
    </b-col>
    <b-col sm="10">
      <b-form-input id="input-large" size="lg" placeholder="Enter your name"></b-form-input>
    </b-col>
  </b-row>
</b-container>

Set heights using the size prop to sm or lg for small or large respectively.

Contextual states 

<b-container fluid>
  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-none">No State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-none" :state="null" placeholder="No validation"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-valid">Valid State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-valid" :state="true" placeholder="Valid input"></b-form-input>
    </b-col>
  </b-row>

  <b-row class="my-1">
    <b-col sm="3">
      <label for="input-invalid">Invalid State:</label>
    </b-col>
    <b-col sm="9">
      <b-form-input id="input-invalid" :state="false" placeholder="Invalid input"></b-form-input>
    </b-col>
  </b-row>
</b-container>

Bootstrap includes validation styles for valid and invalid states on most form controls.

Contextual states Live Example 

<div role="group">
   <label for="input-live">Name:</label>
   <b-form-input
     id="input-live"
     v-model="name"
     :state="nameState"
     aria-describedby="input-live-help input-live-feedback"
     placeholder="Enter your name"
     trim
   ></b-form-input>

   <!-- This will only be shown if the preceding input has an invalid state -->
   <b-form-invalid-feedback id="input-live-feedback">
     Enter at least 3 letters
   </b-form-invalid-feedback>

   <!-- This is a form text block (formerly known as help block) -->
   <b-form-text id="input-live-help">Your full name.</b-form-text>
 </div>
Enter at least 3 letters
Your full name.