SaladUI

Radio Group

Radio input group component

Read more Read less

Examples:

<.radio_group name="question-1" value="option-2">
<div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-one" id="option-one"></.radio_group_item>
  <.label for="option-one">
    Option One
  </.label>
</div>
<div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-two" id="option-two"></.radio_group_item>
  <.label for="option-two">
    Option Two
  </.label>
</div>

</.radio_group>

Radio no checked Open in playground 
<.radio_group :let={builder} name="question-1">
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-one" id="option-one">
  </.radio_group_item>
  <.label for="option-one">
  Option One
  </.label>
  </div>
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-two" id="option-two">
  </.radio_group_item>
  <.label for="option-two">
  Option Two
  </.label>
  </div>
</.radio_group>
Radio checked value Open in playground 
<.radio_group :let={builder} name="question-2" value="option-two">
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-one" id="option-one">
  </.radio_group_item>
  <.label for="option-one">
  Option One
  </.label>
  </div>
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-two" id="option-two">
  </.radio_group_item>
  <.label for="option-two">
  Option Two
  </.label>
  </div>
</.radio_group>
Radio checked manually Open in playground 
<.radio_group :let={builder} name="question-3">
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-one" id="option-one" checked>
  </.radio_group_item>
  <.label for="option-one">
  Option One
  </.label>
  </div>
  <div class="flex items-center space-x-2">
  <.radio_group_item builder={builder} value="option-two" id="option-two">
  </.radio_group_item>
  <.label for="option-two">
  Option Two
  </.label>
  </div>
</.radio_group>