Tailwind & Alpine.js radio button styling

Question

I have a size selector as shown below and I'm trying to get the styling working with Alpine.js so that the selected size appears highlighted.

What is the correct code Alpine.js code to add classes depending on whether a radio box is checked or not:

Checked: "bg-indigo-600 border-transparent text-white hover:bg-indigo-700"
Not Checked: "bg-white border-gray-200 text-gray-900 hover:bg-gray-50"

<fieldset>
  <legend>Choose size</legend>
  <div class="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
    <label
      for="small"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      x-data="{ isChecked: false }"
      :aria-checked="isChecked"
      :class="{'bg-indigo-600 border-transparent text-white hover:bg-indigo-700': isChecked, 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50': !isChecked }"
      @click="isChecked = !isChecked"
    >
      <input id="small" type="radio" name="size-choice" value="s" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

    <label
      for="medium"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      x-data="{ isChecked: false }"
      :aria-checked="isChecked"
      :class="{'bg-indigo-600 border-transparent text-white hover:bg-indigo-700': isChecked, 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50': !isChecked }"
      @click="isChecked = !isChecked"
    >
      <input id="medium" type="radio" name="size-choice" value="m" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

  </div>
</fieldset>

Thank you, I was looking for some guidance as to how to get this working as shown in the image. — migu, Jan 20 '22 at 13:54
*I was looking for some guidance as to how to get this working as shown in the image* isn't a question. First step would be to create a [mcve] — Liam, Jan 20 '22 at 13:57
@migu, Try adding css (may be) like ```input:checked + p{ border-color:blue; background-color:blue; }``` . — Maniraj Murugan, Jan 20 '22 at 14:02
@ManirajMurugan the OP is using tailwind. You shouldn't add css when using tailwind — Liam, Jan 20 '22 at 14:14

score 1 · Accepted Answer · answered Jan 20 '22 at 15:05

I recommend to use a common size variable and bind it to the radio input element via x-model. Currently you have as many independent isChecked states as many button you have, which is - I guess - not the expected behavior.

The modified example:

<fieldset x-data="{size: null}">
  <legend>Choose size</legend>
  <div class="mt-4 grid grid-cols-3 gap-3 sm:grid-cols-4">
    <label for="small"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      :aria-checked="size == 's'"
      :class="size == 's' ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50'">
      <input x-model="size" id="small" type="radio" name="size-choice" value="s" class="sr-only" aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Small
      </p>
    </label>

    <label for="medium"
      class="border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:border-transparent checked:text-white checked:hover:bg-indigo-700"
      :aria-checked="size == 'm'"
      :class="size == 'm' ? 'bg-indigo-600 border-transparent text-white hover:bg-indigo-700' : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50'">
      <input x-model="size" id="medium" type="radio" name="size-choice" value="m" class="sr-only"
        aria-labelledby="size-choice-0-label">
      <p id="size-choice-0-label">
        Medium
      </p>
    </label>
  </div>
</fieldset>

I have just replaced every selection-checking with the suggested method. Furthermore putting a @click event to the label caused some weird double-clicking behavior for me. Adding a @click.prevent modifier solved this issue, but after that the radio element does not received the click event. My suggestion avoided this issue because the radio input element itself became the source of the information.

Tailwind & Alpine.js radio button styling

1 Answers1