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

Email address

Example select

Example multiple select

Example textarea

 <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

Select file

<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

Text

URL

Phone

Password

Number

Datetime

Date

Month

Week

Time

Color

<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

Large input

Default input

<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

Unchecked

Checked

Unchecked

Checked

<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

Unchecked

Checked

Disabled unchecked

Disabled checked

<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

← Dropdowns Input groups →

# Forms

# Form controls

# Alternative

# Flush

# Muted

# Form controls

# File browser

# HTML5 inputs

# Sizing

# Textarea

# Alternative

# Checkboxes

# Radio buttons

# Toggle buttons

# Sliders

# Base Input props

# Base input slots

# Base input events

# Base Checkbox props

# Base checkbox slots

# Base checkbox events

# Base Radio props

# Base radio slots

# Base radio events

# Slider plugin props

# Base radio events

Forms

Form controls

Alternative

Flush

Muted

Form controls

File browser

HTML5 inputs

Sizing

Textarea

Alternative

Checkboxes

Radio buttons

Toggle buttons

Sliders

Base Input props

Base input slots

Base input events

Base Checkbox props

Base checkbox slots

Base checkbox events

Base Radio props

Base radio slots

Base radio events

Slider plugin props

Base radio events