<.radio_group id="radio-group-single-default" default_value="comfortable"> <div class="flex items-center space-x-2"> <.radio_group_item value="default" id="rg-d-1" /> <.label for="rg-d-1">Default</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="comfortable" id="rg-d-2" /> <.label for="rg-d-2">Comfortable</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="compact" id="rg-d-3" /> <.label for="rg-d-3">Compact</.label> </div> </.radio_group>
<.radio_group id="radio-group-single-horizontal" default_value="md" orientation="horizontal"> <div class="flex items-center space-x-2"> <.radio_group_item value="sm" id="rg-h-1" /> <.label for="rg-h-1">Small</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="md" id="rg-h-2" /> <.label for="rg-h-2">Medium</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="lg" id="rg-h-3" /> <.label for="rg-h-3">Large</.label> </div> </.radio_group>
<.radio_group id="radio-group-single-disabled" default_value="option-1"> <div class="flex items-center space-x-2"> <.radio_group_item value="option-1" id="rg-dis-1" /> <.label for="rg-dis-1">Option 1</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="option-2" id="rg-dis-2" disabled /> <.label for="rg-dis-2" class="opacity-50">Option 2 (disabled)</.label> </div> <div class="flex items-center space-x-2"> <.radio_group_item value="option-3" id="rg-dis-3" /> <.label for="rg-dis-3">Option 3</.label> </div> </.radio_group>