Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting required to input element within TextInput #4411

Closed
fcollonval opened this issue Mar 19, 2024 · 2 comments
Closed

Setting required to input element within TextInput #4411

fcollonval opened this issue Mar 19, 2024 · 2 comments
Assignees
Labels

Comments

@fcollonval
Copy link
Contributor

When setting required to TextInput it is not set to the input element - only on the aria attribute:

aria-required={required}

Could you set it so that built-in form validation can be used fully? For now it is awkward to be able to set a pattern or other constrains but that the component built-in validity is always true if no value is set.

@fcollonval
Copy link
Contributor Author

fcollonval commented Mar 19, 2024

The same issue applies to the Textarea component too:

aria-required={required}

@siddharthkp
Copy link
Contributor

siddharthkp commented Mar 19, 2024

Hi!

This is intentional change. (#4023)

aria-required communicates the same message to screen readers as required, but avoids browser's default validation messages. (which we'd like to do in favor of validation messages from Primer)

Example of default browser validation message and Primer's validation message:

a validation message that looks like a tooltip with the message: Please match the format requested a validation message underneath a textinput that matches primer's design

If you'd like to use validation messages that match Primer's design, please use <FormControl.Validation>.
Example in storybook ↗ | Source code for example ↗ | Primer docs ↗

Hope that answers your question. If not, feel free to comment on this issue and I'll open it again!

@siddharthkp siddharthkp self-assigned this Mar 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants