Error slot for TextInput - #329
Merged
Merged
Conversation
rwood-moz
reviewed
Sep 16, 2026
Collaborator
Author
@rwood-moz Great catch, I missed that. But honestly: I couldn't find a way to make this work 😅 There seems to be no support for component slots in the @storybook/vue3-vite plugin. So I'm afraid we have to keep it that way, or maybe you have an idea? |
davinotdavid
approved these changes
Sep 22, 2026
davinotdavid
left a comment
Contributor
There was a problem hiding this comment.
Thanks! LGTM through code diff + automated tests + local testing.
I think that it is fine not to have that in the Storybook for now / shouldn't be blocking for this to get in.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

What changed?
TextInput's error display is now rendered through anerrornamed slot instead of a plain{{ error }}. Theerrorprop is still supported and is used as the slot's default content, so all existing usages keep working unchanged. When anerrorslot is provided, it overrides the prop and can render any content (e.g. a link) instead of plain text.A second
Errorstory example was added toTextInput.stories.tsshowing both the plain string case and the slot case (a link inside the error message), plus two unit tests.Why?
The
errorprop only accepted a plain string, which didn't allow for richer error messages containing interactive elements such as a<router-link />(e.g. "Your session expired, please log in again"). Consumers needing this had to build a hacky workaround, manually re-implementing the invalid styling elsewhere.Limitations and Notes
error-labelCSS class now instead of reusing the help-label. This also fixed a regression since the error-label actually needs to be a flex container.TextInputwas changed. Other components with the same string-onlyhelpprop pattern (TextArea,SelectInput,CheckboxInput,BubbleSelect) are out of scope, but we might want to adjust them too.Applicable Issues
Closes #196
Screenshots