Radio Button
Definition
<cst-radio>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-item />
<sub-item />
<sub-options />
<sub-help-icon/>
<sub-feature-flag/>
</cst-radio>
OR
<cst-element name="radio" schema="" schema-prop="" value=""/>
Example
<cst-radio id="" value="">
<sub-theme name="" clr-var1="" clr-var2=""/>
<sub-font name="" font-var1="" font-var2=""/>
<sub-style name="" width="" height=""/>
<sub-access can-view="" can-modify=""/>
<sub-item id="" text="" />
<sub-item id="" text="" />
<sub-options items-prop="" item-text-prop="" item-id-prop=""/>
<sub-help-icon name="" position="" title="" link="">
<sub-feature-flag disable-ripple="">
</cst-radio>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| value | string type | Specifies the selected item's id for component.(two way bind attribute) |
| required | boolean type | Specifies if field must be filled. |
| disabled | boolean type | Specifies if component should be disabled.(aurelia ext attribute) |
| autofocus | boolean type | Specifies if component should be focused when loaded. |
| checked | boolean type | Specifies if radio is checked. |
| display-type | sting type(radio) | Specifies the component. |
| class | cst-mat-unchecked cst-mat-checked | Specifies class to be applied(Multiple classes can be given with space). |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object type | Specifies the options of component. | |
| object type | Specifies help icon to be displayed. | |
| object | Specifies what features to enable/disable. | |
| other | any type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom | Name of the theme. |
| clr-label | string type | If custom then specific/ named color variables |
sub-font
| Property | Value | Description |
|---|---|---|
| name | roboto (default)/custom | Name of the font |
| font-text | string type | If custom then specific/ named font variables. |
| font-label | string type | |
| font-error | string type |
sub-style
| Property | Value | Description |
|---|---|---|
| name | material/skeuomorphic | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-options
| Property | Value | Description |
|---|---|---|
| items-prop | string type | Property of item array |
| item-id-prop | string type | Property of item's id |
| item-text-prop | string type | Property of item's display text. |
sub-help-icon
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
| link | string type | Link to be opened on click. |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
| disable-ripple | boolean type | Disables ripple effec when given true. |
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
required: ["genderId"], //= required
properties: {
regionId: {
type: "number",
title:"Select Gender",//= label for radio
cstAttr: {
raw:{ //loop & add to element
disabled : false,
autofocus : false,
class:'cst-class1',
checked: '',
required: '',
},
subStyle:{ //loop & add to element style
name: '',
width:'',
height:'',
fontSize:''
},
subOptions:{
itemsProp: '',
itemTextProp: '',
itemIdProp: ''
},
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
subFeatureFlag: {
disableRipple: ''
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
}
}
}
}
}
let schemaProp = 'genderId';
let value = 100;
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
let data = [
{
id: '',
text: '',
checked: '',
textPosition: ''
}
]
Exact schema
let schema = {
type: "number",
title: "Select Gender", //= label
cstAttr: {
}
}
let schemaProp = '';
let value = 100;
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.genderId';
let value = 100;
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
- min-height = 20px
- min-width = 20px
Events
| Attribute | Description |
|---|---|
| onclick | Fires when the item clicked. |
| oninvalid | Script to be run when an element is invalid. |
| onreset | Fires when reset button is clicked. |
| onvalidate | Custom validate hook, must return error message else considered valid; will be called onchange. |
Event Method signature
method(parentRefObj, evtObj, elm, others)
Parameters description
| Parameter | Value | Description |
|---|---|---|
| parentRefObj | parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext } | Parent Context references |
| evtObj | object | Event object |
| elm | object | Element value |
| others | any | Other value |
OverRidable Classes
- cst-ovr-radio-elm
- cst-ovr-radio
- cst-ovr-radio-label
- cst-ovr-radio-helper-text
- cst-ovr-radio-error-text
Unit Test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Features
Display radio group
Text position can be next to radio button
Item Selection
Every items must have id prop (add in check list)
Points
- The maximum height of a radio group should be at least one row less than the height of the app’s UI.