
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">