Radio Groups cards

[ishaiavrahami]

Description

Hello, i was wondering if its possible to create something similar to this perhaps using the existing radio-group component.

Example: https://tailwindui.com/components/application-ui/forms/radio-groups

Additional context

No response

[ymansurozer]

I would love to see this type of component. There are many use cases for it.

[benjamincanac]

I've thought about this already but I don't see how we could create a component that matches every use-cases. There can be so different possibilities in styling here.

In the meantime, you can create your own using Headless UI RadioGroup component: https://headlessui.com/vue/radio-group

[dosstx]

I had a need for this today. Here's an example:

[ymansurozer]

@benjamincanac That is fair. But I think we can come up with some basic ones. This makes sense, I think, because considering these radio cards are used everywhere, it seems like a low hanging fruit.

Maybe with two options: RadioCard (like Headless UI's cards or even better, @dosstx's example has icons and looks better) and RadioButton (like Headless UI's small cards). These should cover most use cases.

Would you be open to reviewing a PR for this? I really need these in my app and would be happy to try that (if I manage, that would be my first-ever open source contribution, too so, huray :)).

[ishaiavrahami]

@benjamincanac is is possible to add it to the nuxt ui framework. The UI will look different and out of context if we use the headless ui library

[noook]

I'll probably have a try in the next days/weeks at offering this for the library :)

[richard-edwards]

I've been doing some work on something similar and I'm hitting a wall for some reason. I can't seem to get the inner ui style to take. fieldset seems to apply fine setting to full width but the inner elements which are on radio are not being applied. Tried :ui="{ fieldset: 'w-full', radio:{ inner: 'w-1/2' } }" as well. I'm sure I'm misunderstanding how to apply the radio options styling through the ui tag.

          <URadioGroup
            v-model="state.tournament_id"
            :options="availableTournaments"
            :ui="{ fieldset: 'w-full', inner: 'w-1/2' }"
            value-attribute="id"
            option-attribute="name">
            <template #label="{ option }" :ui="{ label: 'text-lg' }">
              <UCard class="mb-2" :ui="{ body: { padding: 'sm:py-2' } }">
                <div class="flex flex-col">
                  <span class="font-bold">{{ option.label }}</span>
                  <span class="">Starts {{ dayjs().to(dayjs(option.start_date)).toString() }}</span>
                  <span class="">Purse: {{ formatCurrency(option.purse) }}</span>
                </div>
              </UCard>
            </template>
          </URadioGroup>

Trying to get each UCard width the same. If I set radio: { inner: 'w-1/2' } in app.config.ts it applies fine but of course I don't want to set for all radios so I know it's applying some of it.

[larrasu]

I managed to do this using code below. It's doable with URadioGroup alone with the help of Tailwind's has-* pseudo-class.

<URadioGroup 
  v-model="specie" 
  :options="species" 
  :ui="{
    fieldset: 'flex-1 grid grid-cols-2 gap-2' 
  }" 
  :uiRadio="{ 
    wrapper: 'border rounded-md has-[:checked]:bg-primary/10 has-[:checked]:ring-primary has-[:checked]:ring-2', 
    container: 'hidden',
    inner: 'ms-0 flex-1',
    label: 'py-6 flex flex-col items-center cursor-pointer' 
  }">
    <template #label="{ option }">
      <UIcon :name="option.icon" class="text-8xl text-primary" />
      <p>{{ option.name }}</p>
    </template>
</URadioGroup>