Feat: add required indicators to form fields #2815
Conversation
…ents - Introduced a `required` prop to the Label component to indicate mandatory fields. - Updated Input, Textarea, NumberInput, Select, Checkbox, RadioGroup, and other form components to utilize the new `required` prop for better accessibility and user experience.
🦋 Changeset detectedLatest commit: c3b8b91 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
matthewvolk
left a comment
matthewvolk
left a comment
There was a problem hiding this comment.
Could you generate a changeset for this? You can run pnpm changeset from the project root and walk through the prompts. Just include a 1-2 sentence description of the feature, and copy/paste the migration guide from your PR description and the changeset should be good to commit and add to this PR 👍
|
Added translations and a changeset cc @jorgemoya @matthewvolk |
jorgemoya
left a comment
jorgemoya
left a comment
There was a problem hiding this comment.
Marking as request changes only because there's an oversight that will break form components until fixed.
core/messages/da.json
Outdated
| "Form": { | ||
| "optional": "valgfri" |
There was a problem hiding this comment.
These translated labels get auto generated every Monday, so for future references as long as we have the en label that is fine. next-intl will fallback to the en label if there is no available translation.
There was a problem hiding this comment.
Updated to only keep the english version
| className, | ||
| onOptionMouseEnter, | ||
| colorScheme = 'light', | ||
| required, |
There was a problem hiding this comment.
🚨 Since you are destructuring the required prop and it is no longer contained within the ...rest property, this will break the component since RadioGroupPrimitive.Root also needs required for form validation.
So to fix this, simply pass required to RadioGroupPrimitive.Root.
This same issue applies to all other form components.
There was a problem hiding this comment.
Updated each of the components that referenced ...rest to additionally pass the required prop
|
Removed all translations except for english and made sure to pass |
| id={id !== undefined ? `${id}-label` : `${generatedId}-label`} | ||
| > | ||
| {label} | ||
| {!props.required && <span className="ml-1 normal-case">(optional)</span>} |
There was a problem hiding this comment.
Still not using the translated labels
What/Why?
Added
(optional)text to optional fields in forms so that it's clear which ones are required vs notTesting
Open the
/registerroute and see a combination of required and optional fields.Migration
The new
requiredprops are optional, so they are backwards compatible. However, this does mean that the(optional)text will now show up on fields that aren't explicitly marked as required by passing therequiredprop to theLabelcomponent.CATALYST-1672