Toggle: label for and input id

[jjagielka]

Describe the bug

From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Label

To associate the with an element, you need to give the an id attribute. The then needs a for attribute whose value is the same as the input's id. Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit:

	<label>Do you like peas?
	<input type="checkbox" name="peas">
	</label>

Toggle example is implemented with the latter option i.e. input embedded in label, so for and id are redundant.

<label for="default-toggle" class="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="default-toggle" class="sr-only peer">
  <div class="w-11 h-6 ..."></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>

[alekstrust]

Thanks for noticing.

I'm using the toggle inside a dropdown menu. Due to this for attribute, the popup was getting closed.

[zoltanszogyenyi]

Hey @jjagielka @alekstrust,

Thanks for reporting - will be addressed with the v1.5.4 update.

[zoltanszogyenyi]

Fixed in v1.5.4 update with this commit https://github.com/themesberg/flowbite/commit/88237cf66bd1e6ce0267a23f82cba1fc908f11b6.