themesberg / themesberg/flowbite

Toggle component HTML is invalid

Open
#1,034 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Toggle component example in the Flowbite documentation and reproduce the reported markup at validator.w3.org. Check the validator result after adjusting the example so the Toggle HTML is valid, while preserving its documented appearance and behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, tailwindcss
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.