Can't use form group with label (Pico v2)

[ASOwnerYT]

trafficstars

Please search for duplicate or closed issues first.

Describe the issue

When I use a label tag in <form role="group"> it doesn't look as it should

Current Behavior

Vue 3 code:

<template>
  <main class="container">
    <form role="group">
      <label>
        Calculator
        <input type="text" placeholder="0" v-model="userInput" />
        <input type="button" value="=" @click="calculate" />
      </label>
    </form>
  </main>
</template>

Expected Behavior

It's supposed to look something like this but with a label:

Reproduction URL

https://codepen.io/ASOwnerYT/pen/VwERGRP

Environment

Chrome 113.0.5672.127 (32-bit) Windows 10

[pattnaik-soumitri]

I am also facing thiss issue on Pico v1.x.y.

[lucaslarroche]

@ASOwnerYT, @pattnaik-soumitri, You could use legend:

<form>
  <fieldset>
    <legend>Subscribe to our newsletter</legend>
    <div role="group">
      <input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
      <input type="submit" value="Subscribe" />
    </div>
  </fieldset>
</form>

[stuartmaxwell]

Looks like the grouping needs to be done on the parent element of the input tags. The solution is to use a div to group the input boxes.

<form>
  <label>
    Label
    <div role="group">
      <input type="text" placeholder="0" v-model="userInput" />
      <input type="button" value="=" @click="calculate" />
    </div>
  </label>
</form>

Tested and working on v2.0.6