# 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="name@example.com"></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" addon-left-icon="ni ni-zoom-split-in"></base-input>
      </div>
      <div class="col-md-6">
        <base-input placeholder="Birthday" addon-right-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" :valid="false"></base-input>
      </div>
    </div>
</div>

# Alternative

<div>
  <div class="row">
    <div class="col-md-6">
      <base-input alternative placeholder="name@example.com"></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" addon-left-icon="ni ni-zoom-split-in"></base-input>
      </div>
      <div class="col-md-6">
        <base-input alternative placeholder="Birthday" addon-right-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" :valid="false"></base-input>
      </div>
    </div>
</div>

# Textarea

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

# Alternative

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

# 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>

# 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>

# 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>

# 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>

# Base Input props

Prop Name Type Default Description
required Boolean N/A Whether input is required (adds an asterix *)
valid Boolean N/A Whether is valid
label String N/A Input label (text before input)
error String N/A Input error (below input)
labelClasses String N/A Input label css classes
inputClasses String N/A Input css classes
value String | Number N/A Input value
addonRightIcon String N/A Addon right icon
addonLeftIcon String N/A Addont left icon

# 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

# 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

# Slider plugin props

Prop Name Type Default Description
value String | Array | Number N/A Slider value
disabled Boolean N/A Whether slider is disabled
range Object { "min": 0, "max": 100 } Slider range (defaults to 0-100)
type String N/A Slider type (e.g primary, danger etc)
options Object {} noUiSlider options

← Modal →