<exmg-radio-group>

@exmg/exmg-radio-group

This package provides radio group functionality.

Components included:

1. exmg-radio-group - parent component
2. exmg-radio-group-item - each children

Components

<exmg-radio-group>

Can contain many exmg-radio-group-item components as it's children. Children of other types are not supported.

API

Slots

Name	Description
default	Slot to display anything within the item
title	Title of the description of the exmg-radio-group-item
body	Body to render additional information within the exmg-radio-group-item

Events

Name	Description
exmg-radio-group-changed	when selected radio group item changed.

Properties/Attributes

Name	Type	Default	Description
name	string	None	Name of the exmg-radio-group
selected	string	None	Selected value. Should be value of one of value attributes of children nodes.
required	boolean	None	Used for form validation
vertical	string	None	If you want to have vertical layout

<exmg-radio-group-item>

Can be used only as children of exmg-radio-group.

Attributes:

1. value - value of particular item.
2. disabled - boolean, should value be selectable or not (still possible to select programmatically, even if disabled)
3. hide-radio-button - boolean, should circle radio buttons be hidden or not

Each exmg-radio-group-item can have defined content in one of following ways:

1. Define slots with names "title" and "body"
2. Just put any content without defining slot.

Usage

With slots

  <exmg-radio-group name="license" selected="${this.selected}" @exmg-radio-group-changed="${this.onPaperRadioGroupChanged}">
    <exmg-radio-group-item value="option1">
        <div slot="title">Option 1</div>
        <div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </exmg-radio-group-item>
    <exmg-radio-group-item value="option2">
        <div slot="title">Option 2</div>
        <div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </exmg-radio-group-item>
    <exmg-radio-group-item value="option3" disabled>
        <div slot="title">Option 3</div>
        <div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </exmg-radio-group-item>
  </exmg-radio-group>

Without slots

  <exmg-radio-group name="license" selected="${this.selected}" @exmg-radio-group-changed="${this.onPaperRadioGroupChanged}">
    <exmg-radio-group-item value="option1">
        Option 1
    </exmg-radio-group-item>
    <exmg-radio-group-item value="option2">
        Option 2
    </exmg-radio-group-item>
  </exmg-radio-group>

Additional references

• Additional Documentation

• Demo