Nuxt•2mo ago

Horizontal URadioGroup

Is is possible to create a horizontal (radios side by side) URadioGroup? I tried this code following the documentation, but it didn't work:

              <URadioGroup v-model="form.ch_sexo" 
                 :options="[
                     { value: 'M', label: 'Masculino' },
                     { value: 'F', label: 'Feminino' },
                     { value: 'X', label: 'Outro' }
                 ]" 
                 :ui="{ container: 'flex flex-row space-x-4' }"
              />

              <URadioGroup v-model="form.ch_sexo" 
                 :options="[
                     { value: 'M', label: 'Masculino' },
                     { value: 'F', label: 'Feminino' },
                     { value: 'X', label: 'Outro' }
                 ]" 
                 :ui="{ container: 'flex flex-row space-x-4' }"
              />

2 Replies

kapa.ai•2mo ago

Hi @JonatasBraz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, I don't have specific information about creating a horizontal URadioGroup in Nuxt UI. The documentation for the RadioGroup component Components > RadioGroup (https://ui.nuxt.com/components/radio-group) doesn't mention a built-in way to make the radio buttons display horizontally. However, I can suggest an alternative approach that might work: Instead of using the URadioGroup component, you could use individual URadio components and arrange them horizontally using Tailwind CSS classes. Here's an example of how you might do this:

<template>
  <div class="flex space-x-4">
    <URadio v-for="option in options" 
            :key="option.value" 
            v-model="form.ch_sexo" 
            :value="option.value" 
            :label="option.label" />
  </div>
</template>

<script setup>
const form = reactive({
  ch_sexo: ''
})

const options = [
  { value: 'M', label: 'Masculino' },
  { value: 'F', label: 'Feminino' },
  { value: 'X', label: 'Outro' }
]
</script>

<template>
  <div class="flex space-x-4">
    <URadio v-for="option in options" 
            :key="option.value" 
            v-model="form.ch_sexo" 
            :value="option.value" 
            :label="option.label" />
  </div>
</template>

<script setup>
const form = reactive({
  ch_sexo: ''
})

const options = [
  { value: 'M', label: 'Masculino' },
  { value: 'F', label: 'Feminino' },
  { value: 'X', label: 'Outro' }
]
</script>

This approach uses the individual URadio components as mentioned in the Components > RadioGroup (https://ui.nuxt.com/components/radio-group) documentation. The flex and space-x-4 Tailwind classes should arrange the radio buttons horizontally with some spacing between them. If this doesn't achieve the desired result, you might need to consult the Nuxt UI documentation further or consider reaching out to the Nuxt community for more specific guidance on customizing the URadioGroup component's layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@206926838952493056> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Horizontal URadioGroup