[Bug Report][3.8.6] Incorrect label positioning when using outlined variant and rounded
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 3.8.6
Vue Version: 3.5.15
Browsers: Chrome 136.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
- Use a Vuetify input component (e.g., v-text-field).
- Set the variant prop to "outlined".
- Set the rounded to prop like "lg" or "sm" not the full rounded one.
- Add a label prop.
- Focus the input or enter text to trigger the floating label.
Expected Behavior
The floating label should align vertically with the input text and the outlined border.
Actual Behavior
The .v-field__outline__start class contains a flex-basis property, which causes misalignment with the input text.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
If this behavior is intentional, there should be an option to align the label correctly.
Contributor 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.
Research direction
Start with the linked Vuetify Playground reproduction and search the source for the .v-field__outline__start class used by outlined v-text-field components. Compare rounded values such as "lg" and "sm" with the full rounded variant, then verify that the floating label aligns with the input text and outline when focused or populated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100