Skip to content

feat(VField): add placeholder slot support#22918

Open
wxj006007 wants to merge 4 commits into
vuetifyjs:masterfrom
wxj006007:feat/20886-placeholder-slot
Open

feat(VField): add placeholder slot support#22918
wxj006007 wants to merge 4 commits into
vuetifyjs:masterfrom
wxj006007:feat/20886-placeholder-slot

Conversation

@wxj006007

Copy link
Copy Markdown

Description

Adds a placeholder slot to VField, VTextField, and VTextarea components, allowing users to customize placeholder content with Vue transitions and other slot features.

Closes #20886

Motivation

Currently, the placeholder prop only accepts a string, making it impossible to use Vue transitions or other dynamic content in the placeholder. The existing label slot already supports this pattern, and this PR extends the same approach to placeholder.

Changes

  • VField.tsx: Added placeholder slot type definition and rendering logic
  • VField.sass: Added styles for .v-field__placeholder
  • VTextField.tsx: Suppress native placeholder attribute when slot is provided
  • VTextarea.tsx: Same as above
  • Tests: Added unit tests for both VTextField and VTextarea placeholder slot behavior

Usage

<v-textarea v-model="input">
  <template #placeholder>
    <v-fade-transition mode="out-in">
      <div :key="placeholderText">{{ placeholderText }}</div>
    </v-fade-transition>
  </template>
</v-textarea>

wxj006007 and others added 4 commits June 9, 2026 20:57
- Remove unused  from VTextField and VTextarea test files
- Fix VTextField test description: 'should render' → 'should not render' to match assertion
Remove placeholder and persistentPlaceholder from VTextField and
VTextarea prop factories since they are now inherited from
makeVFieldProps() in VField, which caused TypeScript TS2783 errors.

Also fix ESLint errors in VField.tsx and test files.

Co-Authored-By: Claude <noreply@anthropic.com>
@J-Sek J-Sek modified the milestone: v4.x.x Jun 16, 2026
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] Slot placeholder for VTextarea

2 participants