Radio Group Element

An element used to create a group of radio buttons.

Examples
Options
Properties
Methods
Slots

#Examples

Basic Usage

Renders a group of radio buttons.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        radiogroup: {
          type: 'radiogroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: 'cherry',
          disable: ['orange'],
        }
      }
    })
  }
</script>

Disable All Items

You may disable all the items with disabled option.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        radiogroup: {
          type: 'radiogroup',
          disabled: true,
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          }
        }
      }
    })
  }
</script>

Custom Radio Template

Overriding the default radio template with a custom component using radio slot.

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup3: {
          type: 'radiogroup',
          items: {
            usps: { name: 'USPS', price: '$36.71' },
            fedex: { name: 'Fedex', price: '$28.15' },
            ups: { name: 'UPS', price: '$38.97' },
          },
          slots: {
            radio: Vue.extend({
              props: ['el$', 'item', 'value'],
              template: `
                <div>
                  <label 
                    :for="value"
                  >
                    <input
                      type="radio"
                      v-model="el$.model"
                      :value="value"
                      :name="value"
                      :id="value"
                    />

                    <span v-html="item.name"></span>
                    <span v-if="item.price">
                      <small class="text-muted">
                        {{ item.price }}
                      </small>
                    </span>
                  </label>
                </div>
              `
            })
          }
        }
      }
    })
  }
</script>

#Options

Name	Type	Description
items	`object`	List of checkbox options.
disable	`array`	List of option keys to be disabled.
disabled	`boolean`	Whether the field is disabled.
default	`str\|num`	Value of element when the form is initially loaded or reseted.

#Properties

Name	Type	Default	Description
items	`object`	`{}`	List of radio buttons.
disables	`array`	`[]`	List of option keys to be disabled.
disabled	`boolean`	`false`	Whether the field is disabled.
defaultValue	`array`	`null`	Value of element when the form is initially loaded or reseted.

#Methods

# .disable(options)

Parameters

options arr|str|num : key of one or more radio buttons to disable.

Disables a radio or more radio buttons.

# .enable(options)

Parameters

options arr|str|num : key of one or more radio buttons to enable.

Enables a radio or more radio buttons.

#Slots

# radio

Props

el$ object : The element component.
item object : The radio item's object.
value str|num|bool : The radio item's value.

Contains the radio field.