feat: Password Input component #3238
Merged
Conversation
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
github-project-automation
bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
MaxLardenois
approved these changes
Dec 15, 2025
Collaborator
MaxLardenois
left a comment
MaxLardenois
left a comment
There was a problem hiding this comment.
LGTM
except we do not have the icons for Sosh...
boosted-bot
moved this from Need Dev Review
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Co-authored-by: Maxime Lardenois <[email protected]>
Co-authored-by: Maxime Lardenois <[email protected]>
vprothais
requested changes
Dec 16, 2025
|
|
||
| A `placeholder` attribute is required on each `<input>` as our CSS-only floating label implementation relies on the `:placeholder-shown` pseudo-element to detect when the input is empty. | ||
|
|
||
| If the placeholder text is empty, it is not visible: only the `<label>` is shown to users. |
Collaborator
There was a problem hiding this comment.
Should we be more explicit on the fact that we need a space in the placeholder ?
Member
Author
There was a problem hiding this comment.
Sorry, you're right, it was copy / paste before the update in text-input. Update done
| <Example code={`<div class="text-input mb-medium"> | ||
| <div class="text-input-container"> | ||
| <label for="inputPassword">Password</label> | ||
| <input type="password" id="inputPassword" class="text-input-field" placeholder=""> |
Collaborator
There was a problem hiding this comment.
All placeholders should be updated with a space character. For now the floating label doesn't work
Member
Author
There was a problem hiding this comment.
Yes, same comment as above. Fixed
| <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/> | ||
| </svg> | ||
| <label for="inputPasswordPrefix">Password</label> | ||
| <div class="input-container" data-bs-prefix="DEV-"> |
Collaborator
There was a problem hiding this comment.
We tell in Text Input page that the Prefix should be mentioned in helper text for accessibility reasons. We should do so here, and in all prefix examples, to stick to that point :)
boosted-bot
moved this from Need Lead Dev Review
to Dev Review In Progress
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
vprothais
approved these changes
Dec 16, 2025
boosted-bot
moved this from Dev Review In Progress
to Need Lead Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
github-project-automation
bot
moved this from Need Lead Dev Review
to Done
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Types of change
Related issues
Closes #3135
Context & Motivation
New Password Input component
Description
New page in the documentation to show how to configure Text Input as a Password Input
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
ouds/mainfollowing conventional commitLive previews