Skip to content

feat(VFileInput): add placeholder and persistent-placeholder props#22960

Open
sridhar-3009 wants to merge 5 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/file-input-placeholder-19837
Open

feat(VFileInput): add placeholder and persistent-placeholder props#22960
sridhar-3009 wants to merge 5 commits into
vuetifyjs:masterfrom
sridhar-3009:feat/file-input-placeholder-19837

Conversation

@sridhar-3009

Copy link
Copy Markdown

Summary

Fixes #19837 — adds placeholder and persistent-placeholder props to v-file-input, similar to v-text-field.

Changes

  • VFileInput.tsx: add placeholder: String and persistentPlaceholder: Boolean props; render placeholder text when no file is selected; include persistentPlaceholder in isActive so the label floats
  • VFileInput.sass: add .v-file-input__placeholder style
  • _variables.scss: add $file-input-placeholder-color SASS variable

Usage

<v-file-input
  label="Upload documents"
  placeholder="Choose one or more files"
  persistent-placeholder
></v-file-input>

Test plan

  • Add placeholder to v-file-input — text should appear when no file is chosen
  • Verify text disappears after a file is selected
  • Verify persistent-placeholder keeps the label floated so placeholder remains visible
  • Verify no visual regression when placeholder is omitted

@J-Sek J-Sek left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • rebase and target dev branch
  • ideally we could overlay text input on top, so universal styles for ::placeholder would match

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] placeholder in v-file-input

2 participants