vaadin-framework/documentation/components/components-passwordfield.asciidoc

---
title: PasswordField
order: 11
layout: page
---

[[components.passwordfield]]
= [classname]#PasswordField#

ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/password-field"]
endif::web[]

The [classname]#PasswordField# is a variant of [classname]#TextField# that hides
the typed input from visual inspection.


[source, java]
----
PasswordField tf = new PasswordField("Keep it secret");
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.passwordfield.basic[on-line example, window="_blank"].

The result is shown in <<figure.components.passwordfield.basic>>.

[[figure.components.passwordfield.basic]]
.[classname]#PasswordField#
image::img/passwordfield-basic.png[width=40%, scaledwidth=50%]

You should note that the [classname]#PasswordField# hides the input only from
"over the shoulder" visual observation. Unless the server connection is
encrypted with a secure connection, such as HTTPS, the input is transmitted in
clear text and may be intercepted by anyone with low-level access to the
network. Also phishing attacks that intercept the input in the browser may be
possible by exploiting JavaScript execution security holes in the browser.

[[components.passwordfield.css]]
== CSS Style Rules

[source, css]
----
.v-textfield { }
----

The [classname]#PasswordField# does not have its own CSS style name but uses the
same [literal]#++v-textfield++# style as the regular [classname]#TextField#. See
<<dummy/../../../framework/components/components-textfield#components.textfield.css,"CSS Style Rules">> for information on styling it.