Checkbox

The checkbox is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.

Installation 

npm i coherent-gameface-checkbox

Usage with UMD: 

<script src="./node_modules/coherent-gameface-checkbox/dist/checkbox.production.min.js"></script>
  • add the checkbox component to your html:
<gameface-checkbox class="checkbox-component"></gameface-checkbox>

This is all! Load the file in Gameface to see the checkbox.

Usage with JavaScript:

If you wish to import the Checkbox using JavaScript you can remove the script tag and import them like this:

import { Checkbox } from 'coherent-gameface-checkbox';

or simply

import 'coherent-gameface-checkbox';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

Customizing the Checkbox

The checkbox has three slots:

  • checkbox-background - holds the check box itself
  • check-mark - holds the check symbol
  • checkbox-label - holds the text of the checkbox; leave empty if no label is required

Use the slots to put customized background or label.

<gameface-checkbox class="checkbox-component" data-url="checkbox">
    <component-slot data-name="checkbox-background">
        <div class="guic-checkbox-background"></div>
    </component-slot>
    <component-slot data-name="checkbox-label">
        <span class="guic-checkbox-label">Enable Music</span>
    </component-slot>
</gameface-checkbox>

Add the Styles 

<link rel="stylesheet" href="coherent-gameface-components-theme.css">
<link rel="stylesheet" href="style.css">

To overwrite the default styles, simply create new rules for the class names that you wish to change and include them after the default styles.

You can put any custom styles inline or use class names and add an external file.

Attributes

You can customize the checkbox using the following attributes:

AttributeTypeDefaultDescription
checkedBooleanfalseWhether the component is checked or not
disabledBooleanfalseWhether the component is disabled or not
valueString‘on’The value that will be returned from the .value getter or the value that will be send if the checkbox is submitted in a form control
nameString''The name that will be used as a key if the checkbox is submitted in a form control - <name>:<value> pair

Working with the Checkbox

Initial Setup

You can configure the Checkbox’s initial state declaratively setting the attributes in the HTML:

<gameface-checkbox class="checkbox-component" checked disabled value="music-on">
</gameface-checkbox>

Updating the Attributes

You can get or set the value, name, checked and disabled attributes of the checkbox using either JavaScript or the DOM APIs:

With JavaScript: 

document.querySelector('gameface-checkbox').<attribute> = <value>;

Where
<attribute> ::= disabled | checked
<value> ::= true | false

The value and name attributes are strings:

document.querySelector('gameface-checkbox').value = 'play-music';

With DOM APIs: 

document.querySelector('gameface-checkbox').setAttribute('<attribute>', '<value>');
document.querySelector('gameface-checkbox').removeAttribute('<attribute>');

Where
<attribute> ::= disabled | checked | value
<value> ::= true | false | string

← Carousel
Color picker →