htmlcssnuxt.jstailwind-cssnuxtui

NuxtUI custom styling of <URadioGroup> component

I would like to style my Radio component like this -

enter image description here

But Nuxt UI default styling gives me this. Without much ability to customize -

enter image description here

I achieved the first styling in a very hacky way. I saw the DOM of the <URadioGroup> component and used deep selector to style child tags. Some class selectors that are used are from tailwind like the items-start. Not the best way, but it works.

Is there a more elegant and straightforward way to do this?

My hacky styling code

<style scoped>

:deep(fieldset) {
  width: 100%;
  display: flex;
  flex-direction: column;
}

:deep(label) {
  cursor: pointer;
  width: 100%;
  padding: 10px;
}

:deep(fieldset > .items-start) {
  align-items: center;
  border-radius: 10px;
  width: 100%;
  padding: 0 10px;
  border-radius: 10px;
}

:deep(fieldset > .items-start):hover {
  background-color: rgba(150, 241, 147, 0.178);
}

:deep(fieldset > .items-start > .ms-3) {
  width: 100%;
}
</style>
Solution

  • I was able to get it to work using uiRadio and ui props.

    <URadioGroup
      v-model="selected"
      :options="methods"
      :ui="{ fieldset: 'w-full flex flex-col'}"
      :uiRadio="{
        label: 'cursor-pointer py-3',
        wrapper: 'pl-2 rounded-md items-center hover:bg-green-100',
        inner: 'w-full',
        form: 'cursor-pointer'
    }"
>
    <template #label="{ option }">
      <p class="text-base w-100">
        {{ option.label }}
      </p>
    </template>
</URadioGroup>