ux-radio

[Vheissu]

Implement the ux-radio component for Material and iOS design.

[Vheissu]

I'll take this one @EisenbergEffect if you can assign it to me.

[groundzero2010]

I'd like to help out with this.

[serifine]

Go for it!

[jdanyow]

some ideas in this gist: https://gist.run/?id=a78d15898660218b8438e34dcc31f390

[serifine]

So perhaps two components, one for a simple use case, one for a more complex one.

Single Radio component for simple use cases

<ux-radio value="male" checked.bind="gender">Male</ux-radio>

@jdanyow multi input idea that could wrap up the original.

<ux-radio-group items-source.bind="colors" value.bind="color1"></ux-radio-group>

Thoughts?

[serifine]

I will leave this here as well, from an earlier discussion on gitter.

To expand on what I copied below, the ux-checkbox currently will have the same bindings for the value and checked.bind, so perhaps we could have a single wrapper for both components since the binding and styles will be close if not the same.

---

So the standard use of a radio button is:

  <input type="radio" name="color" value="red"> Red
  <input type="radio" name="color" value="blue"> Blue

I think there is a good game plan going forward with the following attributes:
value: represents the value of the radio button, follows the standard html usage of value in a checkbox
checked: represents the property on the view model to bind to, follows how Aurelia binds to radios in the docs
label(optional): represents an optional label that can also be provided in the slot

Leaving the following usage

  <ux-radio value="red" checked.bind="color"></ux-radio>
  <ux-radio value="blue" checked.bind="color"></ux-radio>

  <ux-radio value="red" checked.bind="color">Red</ux-radio>
  <ux-radio value="blue" checked.bind="color">Blue</ux-radio>

  <ux-radio value="red" checked.bind="color" label="Red"></ux-radio>
  <ux-radio value="blue" checked.bind="color" label="Blue"></ux-radio>

[jdanyow]

@ZHollingshead re: #21 (comment)

two components: the radio primitive and the radio group/selector- sounds good 👍

[serifine]

Issue moved to aurelia/ux-components #13 via ZenHub