Password Toggle

1function PasswordField() {
2  const [show, setShow] = React.useState(false);
3  const [v, setV] = React.useState('geheim123');
4  return (
5    <div style={{position:'relative',width:280,fontFamily:'system-ui'}}>
6      <input type={show?'text':'password'} value={v} onChange={e=>setV(e.target.value)}
7        style={{width:'100%',padding:'13px 44px 13px 14px',borderRadius:12,border:'1px solid rgba(255,255,255,.14)',
8        background:'rgba(255,255,255,.04)',color:'#fff',fontSize:15,outline:'none',boxSizing:'border-box'}} />
9      <button onClick={()=>setShow(!show)} aria-label="Anzeigen" style={{position:'absolute',right:8,top:'50%',transform:'translateY(-50%)',
10        background:'none',border:0,cursor:'pointer',color:'#a78bfa',fontSize:17,padding:6}}>{show?'🙈':'👁'}</button>
11    </div>
12  );
13}