Ah. Haha, there is a semantic and accessible option for the eye as well but it takes quite a bit of styling:
toggle for show/hide password is an input of type checkbox
style it to use the open/closed eye icon for checked/unchecked (this is where it’s fiddly because the actual checkbox has to be hidden and the style goes on the label
that would be the show/hide button
it now automatically has the behaviour associated with check boxes, hook that into the React state
No, it means I’m positioning that element on the right hand side of the nearest relatively positioned parent (which is the wrapper for the button and the input)
If you are worried about the eye icon shifting below the input at very narrow view port widths then use the CSS white-space: nowrap property on the wrapping <div> to suppress it.
I’ve had some fun building that, but I don’t know if it does what it’s supposed to do. If you want to toggle the appearance of the input between visible letters and those password dots, I think you’d have to change the type of input (not possible with CSS).
And anyway, you already have React set up, so JS is already there to do all that stuff for you.
It should be a button of some kind because it’s a control: it’s not a styling effect, it’s something a user interacts with. The input should have a label – that’s a given from an accessibility point of view (that’s not just for less abled users, it’s much easier to use forms if the inputs are labelled)
Yeah, normal pattern in every library I’ve ever seen is to toggle between type="password" and type="text" which gives the required behaviour, and that’s dead easy with React @Ethan1021