The <fb-radio-group> Component

Using this component, you can create a group of radio buttons. It can be located within the <form-builder> component, then it requires name property, or it can be used with v-model Vue directive. The example below shows several different groups of radio buttons which you can customize at your own discretion.

Components

• Form Builder
• Auto Captcha
• Checkbox
• Code
• Company Slug
• Date
• Date range
• Editor
• Input
• Multi block
• Phone
• Radio Group
• Select
• Slider
• Switcher
• Textarea
• Uploader

Example

<form-builder url="/api-url">
    <fb-radio-group
        name="options"
        label="Choose option"
        :items="[{name: 'Option 1', value:'option_1'}, {name: 'Option 2', value:'option_2'}]"
    ></fb-radio-group>
</form-builder>

@vue @endvue

Component properties

Array of radio buttons

There are two options for displaying the items array:

const items = ['Item 1', 'Item 2', 'Item 3']
// In such case, we will get radio buttons with the same `<label>` and `value`

const items = [
    {name: 'Item 1', value: 'val1'},
    {name: 'Item 2', value: 'val2'},
    {name: 'Item 3', value: 'val3'}
]
// In such case, the text within the `<label>` element is equal to `name`
// and the `value` attribute is equal to `value`

@vue @endvue

Styling of the radio button

Using the slot, by default, you can style the appearance of buttons. Please use the following HTML code snippet to customize your buttons:

<form-builder url="/api-url">
    <fb-radio-group
        name="custom"
        label="Customized options"
        :items="[
            {heading: 'Heading 1', subtitle: 'Subtitle 1', value: 1},
            {heading: 'Heading 2', subtitle: 'Subtitle 2', value: 2},
        ]"
    >
        <template slot-scope="radio">
            <span class="my-box">
                <span
                    :class="['my-box__heading', {'is-checked': radio.checked, 'is-focused': radio.focused}]"
                >{{ radio.heading }}</span>
                <em class="my-box__subtitle">{{ radio.subtitle }}</em>
            </span>
        </template>
    </fb-radio-group>
</form-builder>

The following variables are passed to the slot: