Support floating labels with form adornments
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 52/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- css, html, javascript, scss
- Domain
- accessibility, documentation, frontend
Research direction
Start by reading the floating label and form adornment documentation and implementation, then check related issue #37935 for context. Determine how the recommended markup can keep the label associated with the input while leaving the adornment outside its accessible name. Done when labels float correctly, interactive adornments work with mouse and keyboard, and the docs include an example.
Written by the indexing model from the issue text.
Description
Let's make floating labels work with form adornments in Bootstrap 6. A field should be able to use a floating label alongside an icon or a separate control, like a button that opens a help tooltip.
Keep the label associated with the actual input and the adornment separate from the label so it doesn't become part of the field's accessible name. Check that the label still floats correctly and that interactive adornments work with both mouse and keyboard. Add a docs example showing the recommended markup.
Related to #37935. This is for v6 only.
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.7k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 103
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
Select input form caret wrong position on RTL modePossibly taken A pull request linked to this issue is open or already merged. Openbug confirmed css v6
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
twbs/bootstrap#43327 · 1 comment ·
Maintainers usually reply within 1 day
-
v6: OTP input keeps the rest of a selection when you type over itPossibly taken @thejesh23 claimed this 1 day ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
twbs/bootstrap#43323 · 2 comments ·
Maintainers usually reply within 1 day
-
v6: Strength ignores common symbols as special charactersPossibly taken @thejesh23 claimed this 1 day ago. Openbug confirmed docs has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
twbs/bootstrap#43322 · 1 comment ·
Maintainers usually reply within 1 day
-
v6 alpha - hover-lift effect on menu dropdown only works when mouse is over the buttonPossibly taken @Aryan9891 claimed this 5 days ago. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Dialog closes when a file input inside it has its picker cancelledPossibly taken @samyferhat claimed this 5 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
twbs/bootstrap#43278 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
Similar issues
-
accessibility good first issue
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
LibreChat-AI/LibreChat#17957 ·
Maintainers usually reply within 1 day
-
Detail sidebar collapse drops keyboard focusPossibly taken @GYJ99 claimed this today. Openproject#dify
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
langgenius/dify#45934 · 2 comments · 1 reaction ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
Maintainers usually reply within 1 day