ui-checkbox

Usage

<ui-checkbox class="toggle" name="profileVisible" label="Make my profile visible"></ui-checkbox>

Behavior

A checkbox instance has the following methods

$toggle()
$check()
$uncheck()
$isChecked()
$isRadio()

Attributes

class {String}

Any Checkbox class available in Semantic-UI which changes the styling is acceptable

<ui-checkbox class="slider" label="Make my profile visible"></ui-checkbox>
<ui-checkbox class="radio" label="Choose me!"></ui-checkbox>
<ui-checkbox class="read-only" label="You can only read me!"></ui-checkbox>

label {String}

Text which appears to the right of the checkbox/radio to give a hint what it is about

value {String}

Initialize a radio checkbox with a value. If no label is specified, value will take its place in the template

checked

If this attribute is specified, without any value, the checkbox will be initialized in the 'checked' state

<ui-checkbox label="I'm checked!" checked></ui-checkbox>

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.