sample form

by jorgeluis

HTML

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/[email protected]/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div id="app">


<form class="p-2">

  <div class="field m-b-2">
    <b-switch v-model="form.active">
      Enabled
    </b-switch>
    <small class="help">Help text goes here, with the 'help' classname</small>
  </div>

  <div class="field m-b-1">
    <label
      for="companyNameTextField"
      class="label">Text Field</label>
    <input
      v-model="form.companyName"
      id="companyNameTextField"
      class="input"
      type="text">
      
    <small class="help">Help text goes here, with the 'help' classname</small>
  </div>

  <div class="field m-b-1">
    <div class="is-flex is-flex-justify-space-between">
      <label
        for="companyNameTextField2"
        class="label">Label with right-aligned help link</label>
      <a href="#">Where is this?</a>
    </div>
    <input
      v-model="form.companyName"
      id="companyNameTextField2"
      class="input"
      type="text">
  </div>

  <div class="field m-b-2">
    <label
      for="companySearchtField"
      class="label">Search</label>
    <input
      id="companySearchtField"
      placeholder="Search by name..."
      class="input"
      type="search">
      
    <small class="help">Search field adds the handy little X icon</small>
  </div>

  
  <div class="m-b-2">
    <label class="label m-b-half">Checkboxes</label>

    <div class="field">
      <b-checkbox v-model="form.active">
        The text of the checkbox
      </b-checkbox>
    </div>

    <div class="field">
      <b-checkbox v-model="form.active">
        The text of the checkbox
      </b-checkbox>
      <small class="help">This checkbox also has some help text</small>
    </div>
  </div>  
  
  <div class="field m-b-2">

    <label class="label m-l-0">Radio Buttons</label>
    <div class="block">
      <div class="field">
       ...

CSS

#app {
  padding: 2rem;
}

.is-flex { display: flex }
.is-flex-justify-space-between { justify-content: space-between; }

JavaScript

const example = {
	data() {
		return {
    	form: {
	      companyName: 'Company Name',
        active: true,
        os: 'ios'
      },
			isLoading: false,
      isDisabled: false
		}
	},
	methods: {
		makeRequest () {
    	this.isLoading = true

			setTimeout(_ => {
      	this.isLoading = false
      }, 3000)

		}
  }
}

const app = new Vue(example)
app.$mount('#app')