<template>
    <form>
        <g-field label="Name" is-horizontal>
            <g-input maxlength="20" placeholder="Default Text Input"/>
        </g-field>
        <g-field label="Username" message="Username is avalaible" type="success" is-horizontal>
            <g-input value="cahyowhy"/>
        </g-field>
        <g-field label="Email" message="Email format is wrong!" type="danger" is-horizontal>
            <g-input value="cahyowhy01@gmail.com">
                <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="Phone number" is-horizontal>
            <g-input label="Office phone number" type="danger" message="phone number not valid"
                     value="6281xx"></g-input>
            <g-input label="Home phone number"></g-input>
        </g-field>
        <g-field label="Subject" is-horizontal>
            <g-select placeholder="Choose only one" is-expanded is-fullwidth>
                <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" is-horizontal>
            <g-input input-type="textarea" placeholder="Fill with your bio">
            </g-input>
        </g-field>
        <g-field label="Yes no question" is-horizontal>
            <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" is-horizontal>
            <g-checkbox>I agree to the terms and conditions</g-checkbox>
        </g-field>
        <g-field class="has-text-right" is-horizontal>
            <g-button value="Send" type="info"></g-button>
        </g-field>
    </form>
</template>

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