Checkboxes

• Material Design Spec
• Develop
• Demo

• Graphics Link

Definition

<cst-checkbox>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-label/>

<sub-item />

<sub-item />

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-checkbox>

OR

<cst-element name="" schema="" schema-prop="" value=""/>

name = checkbox or checkbox-group

Example

<cst-checkbox 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-label text="" position=""/>

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

</cst-checkbox>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	array/boolean type	Specifies the selected item(s) for component(two way bind attribute). Boolean for checkbox and id array for checkbox group
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 checkbox is checked.
class	cst-mat-unchecked cst-mat-indeterminate cst-mat-checked	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-label	object type	Specifies label to be displayed.
sub-options	object type	Specifies the options for the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	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-label(For single checkbox)

Property	Value	Description
text	string type	Label text.
position	left/top/center(default)	Position of the label.

sub-options(For checkbox group)

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.
indeterminate(For checkbox group)	boolean type	Display to select all, unselect all or partially select checkboxes from checkbox group

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["languageId"], //= required

properties: {

regionId: {

type: "number",

title:"Select Language",//= label for checkbox group

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:''

},

subLabel:{

position:'',

text:''

},

subOptions:{

itemsProp: '',

itemTextProp: '',

itemIdProp: ''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

disableRipple: ''

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

}

}

}

}

}

let schemaProp = 'languageId';

let value = [200,300];

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

let data = [ // For checkbox group

{

id: '',

text: '',

checked: '',

disabled: ''

}

]

Exact schema

let schema = {

type: "number",

title: "Select Language", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = [200,300];

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.languageId';

let value = [200,300];

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

• min-height = 24px
• min-width = 24px

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-checkbox-elm
• cst-ovr-checkbox
• cst-ovr-checkbox-label
• cst-ovr-checkbox-helper-text
• cst-ovr-checkbox-error-text

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Features

• Display checkbox or checkbox group

• Checkbox text position will be next to checkbox

• Item Selection

  • Single selection
    • Value should be true or false
  • Multi selection
    • Value should be an array of selected items
    • Use checkbox indeterminate state for nested item partial selection

• Every items must have id prop (add in check list)

Points

• The maximum height of a checkbox group should be at least one row less than the height of the app’s UI.