Ractive Ez Check

Check button component for ractive.js

Demo

Install

npm i ractive-ez-check

import 'ractive-ez-check';
import 'ractive-ez-check/themes/blue.less';

Theming requires less-loader. Icons require ractive-ez-icon

Usage

<EzCheck
    value="{{ value }}"
    disabled
    label="I agree"
    button="true"
    iconChecked="arrow-up"
    iconUnchecked="arrow-down" />

• value: The value of the checkbox
• disabled: True if the component is disabled
• label: The text label of the checkbox
• button: If true, render the checkbox as a button
• iconChecked: When using ractive-ez-icon, can set an icon for the "checked" state
• iconUnchecked: When using ractive-ez-icon, can set an icon for the "unchecked" state

Custom label format

If a text label is not sufficient for your checkbox, you can override the label partial:

<EzCheck value="{{ value }}" label>
    <b>Bold label</b>
</EzCheck>

Shorthand subcomponents

• EzCheck: The base component
• EzCheckButton: Implied button
• EzCheckIcon: Implied check icons (defaulting to checkbox-checked and checkbox-unchecked)
• EzCheckIconButton: Implied icon button