React Background attributes

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)

Yeah, that makes perfect sense. I always think of toggles as being buttons by no reason why that wouldn’t work as well.

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.

so whats the verdict here then… adding a label for the input and adding the button…?

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.

2 Likes

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)

this is exactly what its meant to do apart froma. few things but ill take it from there thanks

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

First I wanted to make a simple example, but I was bored and started fussing around and before you know it, it’s a “thing”.

Anyway, here is another example in React.

2 Likes