Components chevron_right Radio

GitHub

Basic Usage

Stand alone

Toggable
Blockless
Disabled

Template

<PaperRadio @toggle={{true}} @value="Toggable" @groupValue={{this.toggleValue}} @onChange={{action (mut this.toggleValue)}}>
  Toggable
</PaperRadio>
<PaperRadio @label="Blockless" @toggle={{true}} @value="Blockless" @groupValue={{this.blocklessValue}} @onChange={{action (mut this.blocklessValue)}} />
<PaperRadio @value={{false}} @disabled={{true}} @onChange={{null}}>
  Disabled
</PaperRadio>

Selected Value: Apple

Apple
Banana
Mango

Template

<PaperRadioGroup @groupValue={{readonly this.selectedFruit}} @onChange={{action (mut this.selectedFruit)}} as |group|>
  <group.radio @value="Apple" @primary={{true}}> Apple </group.radio>
  <group.radio @value="Banana" @warn={{true}}> Banana </group.radio>
  <group.radio @value="Mango"> Mango </group.radio>
</PaperRadioGroup>

Graphic radio buttons

Selected Value: graphic-1
example1
example2
example3

Template

<PaperRadioGroup @groupValue={{this.selectedGraphic}} @onChange={{action (mut this.selectedGraphic)}} as |group|>

  <group.label>
    <p>Selected Value: <span class="radio-value">{{this.selectedGraphic}}</span></p>
  </group.label>

  <group.radio @value="graphic-1" @primary={{true}}>
    <img src="{{faker-image height=128 width=128}}" width="128" height="128" alt="example1">
  </group.radio>

  <group.radio @value="graphic-2" @warn={{true}}>
    <img src="{{faker-image height=128 width=128}}" width="128" height="128" alt="example2">
  </group.radio>

  <group.radio @value="graphic-3">
    <img src="{{faker-image height=128 width=128}}" width="128" height="128" alt="example3">
  </group.radio>

</PaperRadioGroup>