Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Toggle component HTML is invalid #1034

Open
kamilhajduk opened this issue Feb 16, 2025 · 0 comments
Open

Toggle component HTML is invalid #1034

kamilhajduk opened this issue Feb 16, 2025 · 0 comments

Comments

@kamilhajduk
Copy link

Describe the bug

Flowbite Toggle component HTML is invalid, based on validator.w3.org report

To Reproduce

  1. Go to validator.w3.org
  2. Paste minimal HTML with Toggle component from docs
<!DOCTYPE html>
<html lang=en>
<head>
  <title>Toggle Error Example</title>
</head>
<body>
  <label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" value="" class="sr-only peer">
    <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
  </label>
</body>
</html>
  1. See error: Element div not allowed as child of element label in this context.

Screenshots

Image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kamilhajduk