basicform.vue

<template>
    <form>
        <g-field label="Name" maxlength="20">
            <g-input placeholder="Default Text Input" />
        </g-field>
        <g-field label="Username" message="Username ini tersedia" type="success">
            <g-input value="cahyowhy" />
        </g-field>
        <g-field label="Email" message="Format Email anda salah!" type="danger">
            <g-input value="[email protected]">
                <i slot="iconLeft" class="fas fa-envelope-open-text"></i>
                <i slot="iconRight" class="fas fa-times"></i>
            </g-input>
        </g-field>
        <g-field label="Subject">
            <g-select placeholder="Pilih salah satu">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
                <option value="option4">Option 4</option>
            </g-select>
        </g-field>
        <g-field label="Bio">
            <g-input input-type="textarea" placeholder="Isi tentang diri anda">
            </g-input>
        </g-field>
        <g-field label="Yes no question">
             <g-radiobutton v-model="radioButton1" native-value="yes">Yes</g-radiobutton>
             <g-radiobutton v-model="radioButton1" native-value="no">No</g-radiobutton>
        </g-field>
        <g-field label="Agreement and the others">
              <g-checkbox>I agree to the terms and conditions</g-checkbox>
        </g-field>
        <g-field class="has-text-right">
            <g-button value="Send" type="info"></g-button>
        </g-field>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                radioButton1: 'no'
            }
        }
    }
</script>