colorstypeform.vue

<template>
    <form>
        <g-field label="Color Danger" message="Example colors type danger" type="danger">
            <g-input value="danger">
                <i slot="iconLeft" class="fas fa-user-slash"></i>
                <i slot="iconRight" class="fas fa-times"></i>
            </g-input>
        </g-field>
        <g-field label="Color success" type="success" message="Example colors type success">
            <g-checkbox>I agree to the terms and conditions</g-checkbox>
        </g-field>
        <g-field label="Color warning" type="warning" message="Example colors type warning">
            <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="Color info" type="info" message="Example colors type info">
            <g-select placeholder="Choose only one">
                <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>
    </form>
</template>

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