Radio

Create a customizable radio button with support for highly used options.

About

In Metro 4, you can create styled radio button. To define it, add attribute data-role="radio" to HTML radio element.


                    <input type="radio" data-role="radio" >
                    <input type="radio" data-role="radio" checked>
                    <input type="radio" data-role="radio" disabled>
                    <input type="radio" data-role="radio" disabled checked>

Radio style

You can use two styles for radio. To define style, add attribute data-style="1|2".


                    <input type="radio" data-role="radio">
                    <input type="radio" data-role="radio" data-style="2">

Radio caption

You can set your one value for caption with attribute data-caption="...". By default caption placed on the right o radio. To place on the left, use attribute data-caption-position="left"


                    <input type="radio" data-role="radio" data-caption="radio">
                    <input type="radio" data-role="radio" data-caption="radio" data-caption-position="left">

Options

Option	Data-*	Default	Desc
`style`	`data-style`	1	radio style. Must be 1 or 2
`caption`	`data-caption`		radio caption
`captionPosition`	`data-caption-position`	right	radio caption position: left or right (default)

Events

Event	Data-*	Context
`onRadioCreate(el)`	`data-on-radio-create`	radio

Methods

You can use methods to interact with input component: disable(), enable(), toggleState().


                    var radio = $(el).data('radio');
                    radio.toggleState();

Customize

You can customize your input with special attributes:

Option	Data-*	Desc
`clsRadio`	`data-cls-radio`	Additional classes for control.
`clsCaption`	`data-cls-caption`	Additional classes for caption control.
`clsCheck`	`data-cls-check`	Additional classes check.


                    <style>
                        .myCheck::before{
                            border-color: #0b98da!important;
                            background: #0b98da!important;
                        }
                    </style>

                    <input type="radio" checked
                           data-role="radio"
                           data-style="2"
                           data-caption="radio"
                           data-cls-caption="fg-cyan text-bold"
                           data-cls-check="bd-cyan myCheck">

Table of contents