Skip to content

Error slot for TextInput - #329

Merged
devmount merged 2 commits into
mainfrom
enhancements/196-text-input-error-slot
Sep 23, 2026
Merged

devmount merged 2 commits into
mainfrom
enhancements/196-text-input-error-slot

Conversation

@devmount

Copy link
Copy Markdown
Collaborator

What changed?

TextInput's error display is now rendered through an error named slot instead of a plain {{ error }}. The error prop is still supported and is used as the slot's default content, so all existing usages keep working unchanged. When an error slot is provided, it overrides the prop and can render any content (e.g. a link) instead of plain text.

A second Error story example was added to TextInput.stories.ts showing both the plain string case and the slot case (a link inside the error message), plus two unit tests.

Why?

The error prop 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

  • I implemented a dedicated error-label CSS class now instead of reusing the help-label. This also fixed a regression since the error-label actually needs to be a flex container.
  • Again: Only TextInput was changed. Other components with the same string-only help prop pattern (TextArea, SelectInput, CheckboxInput, BubbleSelect) are out of scope, but we might want to adjust them too.

Applicable Issues

Closes #196

Screenshots

image

@devmount devmount self-assigned this Sep 15, 2026

@rwood-moz rwood-moz 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.

Should the optional error slot be added to the storybook under 'slots' or is just showing 'default' enough?

Image

@devmount

Copy link
Copy Markdown
Collaborator Author

Should the optional error slot be added to the storybook under 'slots' or is just showing 'default' enough?

@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?

cc @davinotdavid

@davinotdavid davinotdavid 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.

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.

@devmount
devmount merged commit 1255a94 into main Sep 23, 2026
5 checks passed
@devmount
devmount deleted the enhancements/196-text-input-error-slot branch September 23, 2026 21:55
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.

TextInput should accept a Vue component as an error

3 participants