`UInput` Floating label background issue in some theme presets
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
Can be checked in the website itself - https://ui.nuxt.com/docs/components/input#with-floating-label
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.11.1
Reproduction
- Go to https://ui.nuxt.com/docs/components/input#with-floating-label
- Change the theme preset from
DefaulttoMono - Floating label and the input has different backgrounds
- Same case in these themes - Mono, Sky, Mint, Iris, Crimson
Description
Issue: The background of the floating label is different than the input background for some of the presents as mentioned in the reproduction above.
Potential fix: Set initial background as transparent, and focus background as default.
<UInput v-model="value" placeholder="" :ui="{ base: 'peer' }">
<label class="...">
<span class="inline-flex px-1 bg-transparent peer-focus:bg-default transition-all">Email address</span>
</label>
</UInput>
Additional context
No response
Logs
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 UInput floating-label example at the linked documentation page and inspect the styling for the Default, Mono, Sky, Mint, Iris, and Crimson presets. Reproduce the mismatch, then verify that the label and input backgrounds match in each named preset and that the focused state remains correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 75/100