# Mojo.Widget.RadioButton

## Namespace Detail

### Overview

If you need a single widget to switch between multiple states while revealing all the state options on the screen, then a RadioButton may fit your needs. Mojo provides a classic RadioButton that presents each button as a labeled selection option in a horizontal array, where only one option can be selected at at time. The number of options is variable, constrained only by the width of the display and the minimum button size that can be pleasingly presented or selected. You can expect to handle between two and five states given the typical screen size for a webOS device, but the framework won't limit you.

### Declaration

>     <div x-mojo-element="RadioButton" id="radiobuttonId"
>       class="radiobuttonClass" name="radiobuttonName"></div>

Properties | Required | Value | Description
--- | --- | --- | ---
x-mojo-element | Required | RadioButton | Declares the widget as type 'RadioButton'.
id | Required | Any String | Identifies the widget element for use when instantiating or rendering.
class | Optional | Any String | RadioButton uses .palm-radiobutton-container by default, but you can override this setting.
name | Optional | Any String | Adds a unique name to the RadioButton widget; generally used in templates.

### Events

>     Mojo.Event.listen(this.controller.get("radiobuttonId"),
>       Mojo.Event.propertyChange, this.handleUpdate);

Event Type | Value | Event Handling
--- | --- | ---
Mojo.Event.propertyChange | { property: this.valueName, value: this.choices[clicked._mojoListIndex].value, model: this.controller.model } |

### Instantiation

>     this.controller.setupWidget("myRadioBtn",
>       this.attributes = {
>           choices: [
>               {label: "One", value: 1},
>               {label: "Two", value: 2}
>           ]
>       },
>       this.model = {
>           value: 1,
>           disabled: false
>       }
>     );

### Attribute Properties

Attribute Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
modelProperty | String | Optional | value | Model property name for RadioButton state
disabledProperty | String | Optional | disabled | Model property name for disabled boolean
choices | Array | Required | null | Array of button descriptions, each of which is a {label: 'string', value: value} entry; number of entries defines scope of widget.

### Model Properties

Model Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
value | User-defined | Required | none | value of widget
disabled | Boolean | Optional | false | If true, RadioButton is inactive.

### Methods

The RadioButton widget does not have any methods.