Ractive Ez Radio

Radio button component for ractive.js

Install

npm i ractive-ez-radio

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

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

Usage

<EzRadioGroup value="{{ value }}" align="horizontal">
    <EzRadioIcon value="1" />
    <EzRadioIcon value="2" />
    <EzRadioIcon value="3" />
</EzRadioGroup>

• EzRadioGroup

  • align: horizontal or vertical
  • value: the value to bind to the selected radio button
  • button: Passed to contained radio buttons
  • disabled: Passed to contained radio buttons
  • iconChecked: Passed to contained radio buttons
  • iconUnchecked: Passed to contained radio buttons

• EzRadio

  • value: The value this radio button assumes
  • disabled: True if the component is disabled
  • button: Render as 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 radio button, you can override the label partial:

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

Shorthand subcomponents

• EzRadio: The base component
• EzRadioButton: Implied button
• EzRadioIcon: Implied radio icons (defaulting to radio-checked and radio-unchecked)
• EzRadioIconButton: Implied icon button