<.radio_group id="radio-group-single-default" name="question-1">
  <div class="flex flex-col space-y-2">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one" />
      <.label for="option-one">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two" />
      <.label for="option-two">Option Two</.label>
    </div>
  </div>
</.radio_group>

<.radio_group id="radio-group-single-with-value" name="question-2" value="option-two">
  <div class="flex flex-col space-y-2">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one-value" />
      <.label for="option-one-value">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two-value" />
      <.label for="option-two-value">Option Two</.label>
    </div>
  </div>
</.radio_group>

<.radio_group
  id="radio-group-single-with-default-value"
  name="question-3"
  default-value="option-one"
>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one-default" />
      <.label for="option-one-default">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two-default" />
      <.label for="option-two-default">Option Two</.label>
    </div>
  </div>
</.radio_group>

<.radio_group
  id="radio-group-single-with-disabled-option"
  name="question-4"
  value="option-one"
>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one-disabled" />
      <.label for="option-one-disabled">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two-disabled" disabled />
      <.label for="option-two-disabled" class="opacity-50">Option Two (Disabled)</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-three" id="option-three-disabled" />
      <.label for="option-three-disabled">Option Three</.label>
    </div>
  </div>
</.radio_group>

<.radio_group id="radio-group-single-horizontal-layout" name="question-5" value="option-two">
  <div class="flex space-x-6">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one-horizontal" />
      <.label for="option-one-horizontal">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two-horizontal" />
      <.label for="option-two-horizontal">Option Two</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-three" id="option-three-horizontal" />
      <.label for="option-three-horizontal">Option Three</.label>
    </div>
  </div>
</.radio_group>

<.radio_group
  id="radio-group-single-with-event-handler"
  name="question-6"
  value="option-one"
  on_value_changed="handle_radio_group_change"
>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-one" id="option-one-event" />
      <.label for="option-one-event">Option One</.label>
    </div>
    <div class="flex items-center space-x-2">
      <.radio_group_item value="option-two" id="option-two-event" />
      <.label for="option-two-event">Option Two</.label>
    </div>
  </div>
</.radio_group>