Forms

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Form controls

<div>
  <div class="row">
    <div class="col-md-6">
        <base-input placeholder="[email protected]"></base-input>
    </div>
    <div class="col-md-6">
      <base-input placeholder="Disabled" disabled></base-input>
    </div>
  </div>
   <div class="row">
      <div class="col-md-6">
          <base-input placeholder="Birthday" prepend-icon="ni ni-zoom-split-in"></base-input>
      </div>
      <div class="col-md-6">
        <base-input placeholder="Birthday" append-icon="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" error="Some error"></base-input>
      </div>
    </div>
</div>
Show Code

Alternative

<div>
  <div class="row">
    <div class="col-md-6">
      <base-input alternative placeholder="[email protected]"></base-input>
    </div>
    <div class="col-md-6">
      <base-input alternative placeholder="Disabled" disabled></base-input>
    </div>
  </div>
   <div class="row">
      <div class="col-md-6">
          <base-input alternative placeholder="Birthday" prepend-icon="ni ni-zoom-split-in"></base-input>
      </div>
      <div class="col-md-6">
        <base-input alternative placeholder="Birthday" append-icon="ni ni-zoom-split-in"></base-input>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
          <base-input alternative placeholder="Success" :valid="true"></base-input>
      </div>
      <div class="col-md-6">
        <base-input alternative placeholder="Error input" error="Some error"></base-input>
      </div>
    </div>
</div>
Show Code

Flush

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

  <base-input placeholder="Flushed input" input-classes="form-control-flush"></base-input>
Show Code

Muted

  <base-input placeholder="Muted input" input-classes="form-control-muted"></base-input>
Show Code

Form controls

 <div>
  <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>
</div>
Show Code

File browser

<template>
  <file-input @change="filesChange"></file-input>
</template>
<script>
  export default {
    data() {
      return {
        files: []
      }
    },
    methods: {
      filesChange(files) {
        this.files = files
      }
    }
  }
</script>
Show Code

HTML5 inputs

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

Sizing

<div>
  <base-input label="Large input" input-classes="form-control-lg" placeholder=".form-control-lg"/>
  <base-input label="Default input" placeholder="Default input"/>
  <base-input label="Default input" input-classes="form-control-sm" placeholder=".form-control-sm"/>
</div>
Show Code

Textarea

<form>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Write a large text here ..."></textarea>
</form>
Show Code

Alternative

<form>
  <textarea class="form-control form-control-alternative" rows="3" placeholder="Write a large text here ..."></textarea>
</form>
Show Code

Checkboxes

<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>
Show Code

Radio buttons

<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>
Show Code

Toggle buttons

<template>
<div>
    <base-switch v-model="switches.off"></base-switch>
    <span class="clearfix"></span>
    <base-switch v-model="switches.on"></base-switch>
</div>
</template>
<script>
export default {
    data(){
        return {
         switches: {
             off: false,
             on: true
          },
       }
    }
}
</script>
Show Code

Sliders

<template>
<div>
     <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>
</div>
</template>
<script>
export default {
    data(){
        return {
         sliders: {
           slider1: 0,
           slider2: [150, 400]
         }
       }
    }
}
</script>
Show Code

Base Input props

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

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

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

Base radio events

Name Description Params
input triggers when the binding value changes (default for v-model) the updated value