Material Design: <a href="http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field">Single line text field</a>

paper-input is a single-line text field for user input. It is a convenience element composed of a paper-input-decorator and a input is="core-input".

Example:

<paper-input label="Your Name"></paper-input>

If you need more control over the input element, use paper-input-decorator.

Theming

paper-input can be styled similarly to paper-input-decorator.

Form submission

Unlike inputs using paper-input-decorator directly, paper-input does not work out of the box with the native form element. This is because the native form is not aware of shadow DOM and does not treat paper-input as a form element.

Use paper-input-decorator directly, or see <a href="https://github.com/garstasio/ajax-form">ajax-form</a> for a possible solution to submitting a paper-input.

Validation

Use paper-input-decorator if you would like to implement validation.

Inheritance
  • Object
  • JSObject
  • DartHtmlDomObject
  • EventTarget
  • Node
  • Element
  • HtmlElement
  • PaperInput
Mixes-in
  • CustomElementProxyMixin
  • PolymerProxyMixin
Annotations
  • CustomElementProxy('paper-input')

Constructors

PaperInput()

factory
PaperInput.created()

Properties

$ → JsObject

The underlying Js Element's $ property.

read-only, inherited
attributes → Map<String, String>

All attributes on this element.

read / write, inherited
baseUri → String

read-only, inherited
borderEdge → CssRect

Access the dimensions and position of this element's content + padding + border box.

read-only, inherited
childNodes → List<Node>

A list of this node's children.

read-only, inherited
children → List<Element>

List of the direct children of this element.

read / write, inherited
classes → CssClassSet

The set of CSS classes applied to this element.

read / write, inherited
className → String

read / write, inherited
client → Rectangle

Gets the position of this element relative to the client area of the page.

read-only, inherited
clientHeight → int

read-only, inherited
clientLeft → int

read-only, inherited
clientTop → int

read-only, inherited
clientWidth → int

read-only, inherited
committedValue → String

The most recently committed value of the input.

read / write
computedName → String

read-only, inherited
computedRole → String

read-only, inherited
contentEdge → CssRect

Access this element's content position.

read-only, inherited
contentEditable → String

read / write, inherited
contextMenu → MenuElement

read / write, inherited
dataset → Map<String, String>

Allows access to all custom data attributes (data-*) set on this element.

read / write, inherited
dir → String

read / write, inherited
disabled → bool

Set to true to style the element as disabled.

read / write
documentOffset → Point

Provides the coordinates of the element relative to the top of the document.

read-only, inherited
draggable → bool

read / write, inherited
dropzone → String

read / write, inherited
firstChild → Node

The first child of this node.

read-only, inherited
floatingLabel → bool

If true, the label will "float" above the text input once the user enters text instead of disappearing.

read / write
hashCode → int

read-only, inherited
hidden → bool

read / write, inherited
id → String

read / write, inherited
innerHtml → String

Parses the HTML fragment and sets it as the contents of this element.

read / write, inherited
isContentEditable → bool

read-only, inherited
jsElement → JsObject

read-only, inherited
label → String

The label for this input. It normally appears as grey text inside the text input and disappears once the user enters text.

read / write
lang → String

read / write, inherited
lastChild → Node

The last child of this node.

read-only, inherited
localName → String

read-only, inherited
marginEdge → CssRect

Access the dimensions and position of this element's content + padding + border + margin box.

read-only, inherited
namespaceUri → String

A URI that identifies the XML namespace of this element.

read-only, inherited
nextElementSibling → Element

read-only, inherited
nextNode → Node

The next sibling node.

read-only, inherited
nodeName → String

The name of this node.

read-only, inherited
nodes → List<Node>

A modifiable list of this node's children.

read / write, inherited
nodeType → int

The type of node.

read-only, inherited
nodeValue → String

The value of this node.

read-only, inherited
offset → Rectangle

Gets the offset of this element relative to its offsetParent.

read-only, inherited
offsetHeight → int

read-only, inherited
offsetLeft → int

read-only, inherited
offsetParent → Element

read-only, inherited
offsetTop → int

read-only, inherited
offsetWidth → int

read-only, inherited
on → ElementEvents

This is an ease-of-use accessor for event streams which should only be used when an explicit accessor is not available.

read-only, inherited
onAbort → ElementStream<Event>

read-only, inherited
onBeforeCopy → ElementStream<Event>

Stream of beforecopy events handled by this Element.

read-only, inherited
onBeforeCut → ElementStream<Event>

Stream of beforecut events handled by this Element.

read-only, inherited
onBeforePaste → ElementStream<Event>

Stream of beforepaste events handled by this Element.

read-only, inherited
onBlur → ElementStream<Event>

read-only, inherited
onCanPlay → ElementStream<Event>

read-only, inherited
onCanPlayThrough → ElementStream<Event>

read-only, inherited
onChange → ElementStream<Event>

read-only, inherited
onClick → ElementStream<MouseEvent>

read-only, inherited
onContextMenu → ElementStream<MouseEvent>

read-only, inherited
onCopy → ElementStream<ClipboardEvent>

Stream of copy events handled by this Element.

read-only, inherited
onCut → ElementStream<ClipboardEvent>

Stream of cut events handled by this Element.

read-only, inherited
onDoubleClick → ElementStream<Event>

read-only, inherited
onDrag → ElementStream<MouseEvent>

read-only, inherited
onDragEnd → ElementStream<MouseEvent>

read-only, inherited
onDragEnter → ElementStream<MouseEvent>

read-only, inherited
onDragLeave → ElementStream<MouseEvent>

read-only, inherited
onDragOver → ElementStream<MouseEvent>

read-only, inherited
onDragStart → ElementStream<MouseEvent>

read-only, inherited
onDrop → ElementStream<MouseEvent>

read-only, inherited
onDurationChange → ElementStream<Event>

read-only, inherited
onEmptied → ElementStream<Event>

read-only, inherited
onEnded → ElementStream<Event>

read-only, inherited
onError → ElementStream<Event>

read-only, inherited
onFocus → ElementStream<Event>

read-only, inherited
onFullscreenChange → ElementStream<Event>

Stream of fullscreenchange events handled by this Element.

read-only, inherited
onFullscreenError → ElementStream<Event>

Stream of fullscreenerror events handled by this Element.

read-only, inherited
onInput → ElementStream<Event>

read-only, inherited
onInvalid → ElementStream<Event>

read-only, inherited
onKeyDown → ElementStream<KeyboardEvent>

read-only, inherited
onKeyPress → ElementStream<KeyboardEvent>

read-only, inherited
onKeyUp → ElementStream<KeyboardEvent>

read-only, inherited
onLoad → ElementStream<Event>

read-only, inherited
onLoadedData → ElementStream<Event>

read-only, inherited
onLoadedMetadata → ElementStream<Event>

read-only, inherited
onMouseDown → ElementStream<MouseEvent>

read-only, inherited
onMouseEnter → ElementStream<MouseEvent>

read-only, inherited
onMouseLeave → ElementStream<MouseEvent>

read-only, inherited
onMouseMove → ElementStream<MouseEvent>

read-only, inherited
onMouseOut → ElementStream<MouseEvent>

read-only, inherited
onMouseOver → ElementStream<MouseEvent>

read-only, inherited
onMouseUp → ElementStream<MouseEvent>

read-only, inherited
onMouseWheel → ElementStream<WheelEvent>

read-only, inherited
onPaste → ElementStream<ClipboardEvent>

Stream of paste events handled by this Element.

read-only, inherited
onPause → ElementStream<Event>

read-only, inherited
onPlay → ElementStream<Event>

read-only, inherited
onPlaying → ElementStream<Event>

read-only, inherited
onRateChange → ElementStream<Event>

read-only, inherited
onReset → ElementStream<Event>

read-only, inherited
onResize → ElementStream<Event>

read-only, inherited
onScroll → ElementStream<Event>

read-only, inherited
onSearch → ElementStream<Event>

Stream of search events handled by this Element.

read-only, inherited
onSeeked → ElementStream<Event>

read-only, inherited
onSeeking → ElementStream<Event>

read-only, inherited
onSelect → ElementStream<Event>

read-only, inherited
onSelectStart → ElementStream<Event>

Stream of selectstart events handled by this Element.

read-only, inherited
onStalled → ElementStream<Event>

read-only, inherited
onSubmit → ElementStream<Event>

read-only, inherited
onSuspend → ElementStream<Event>

read-only, inherited
onTimeUpdate → ElementStream<Event>

read-only, inherited
onTouchCancel → ElementStream<TouchEvent>

Stream of touchcancel events handled by this Element.

read-only, inherited
onTouchEnd → ElementStream<TouchEvent>

Stream of touchend events handled by this Element.

read-only, inherited
onTouchEnter → ElementStream<TouchEvent>

Stream of touchenter events handled by this Element.

read-only, inherited
onTouchLeave → ElementStream<TouchEvent>

Stream of touchleave events handled by this Element.

read-only, inherited
onTouchMove → ElementStream<TouchEvent>

Stream of touchmove events handled by this Element.

read-only, inherited
onTouchStart → ElementStream<TouchEvent>

Stream of touchstart events handled by this Element.

read-only, inherited
onTransitionEnd → ElementStream<TransitionEvent>

Stream of transitionend events handled by this Element.

read-only, inherited
onVolumeChange → ElementStream<Event>

read-only, inherited
onWaiting → ElementStream<Event>

read-only, inherited
outerHtml → String

read-only, inherited
ownerDocument → Document

The document this node belongs to.

read-only, inherited
paddingEdge → CssRect

Access the dimensions and position of this element's content + padding box.

read-only, inherited
parent → Element

The parent element of this node.

read-only, inherited
parentNode → Node

The parent node of this node.

read-only, inherited
preventDispose → bool

By default the data bindings will be cleaned up when this custom element is detached from the document. Overriding this to return true will prevent that from happening.

read / write, inherited
previousElementSibling → Element

read-only, inherited
previousNode → Node

The previous sibling node.

read-only, inherited
runtimeType → Type

A representation of the runtime type of the object.

read-only, inherited
scrollHeight → int

read-only, inherited
scrollLeft → int

read / write, inherited
scrollTop → int

read / write, inherited
scrollWidth → int

read-only, inherited
shadowRoot → ShadowRoot

read-only, inherited
spellcheck → bool

read / write, inherited
style → CssStyleDeclaration

read-only, inherited
tabIndex → int

read / write, inherited
tagName → String

read-only, inherited
text → String

All text within this node and its decendents.

read / write, inherited
title → String

read / write, inherited
translate → bool

read / write, inherited
value → String

The current value of the input.

read / write
xtag → dynamic

Experimental support for web components. This field stores a reference to the component implementation. It was inspired by Mozilla's x-tags project. Please note: in the future it may be possible to extend Element from your class, in which case this field will be deprecated.

read / write, inherited

Operators

operator ==(other) → bool

The equality operator.

inherited

Methods

addEventListener(String type, EventListener listener(Event event), [bool useCapture]) → void

inherited
after(Object nodes) → void

inherited
animate(Iterable<Map<String, dynamic>> frames, [timing]) → Animation

Creates a new AnimationEffect object whose target element is the object on which the method is called, and calls the play() method of the AnimationTimeline object of the document timeline of the node document of the element, passing the newly created AnimationEffect as the argument to the method. Returns an Animation for the effect.

inherited
append(Node node) → Node

Adds a node to the end of the child nodes list of this node.

inherited
appendHtml(String text, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void

Parses the specified text as HTML and adds the resulting node after the last child of this element.

inherited
appendText(String text) → void

Adds the specified text after the last child of this element.

inherited
attached() → void

Called by the DOM when this element has been inserted into the live document.

inherited
attributeChanged(String name, String oldValue, String newValue) → void

Called by the DOM whenever an attribute on this has been changed.

inherited
before(Object nodes) → void

inherited
blur() → void

inherited
cancelUnbindAll() → void

Call in detached to prevent the element from unbinding when it is detached from the dom. The element is unbound as a cleanup step that allows its memory to be reclaimed. If cancelUnbindAll is used, consider calling unbindAll when the element is no longer needed. This will allow its memory to be reclaimed.

inherited
click() → void

inherited
clone(bool deep) → Node

Returns a copy of this node.

inherited
closest(String selectors) → Element

inherited
contains(Node other) → bool

Returns true if this node contains the specified node.

inherited
createFragment(String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → DocumentFragment

Create a DocumentFragment from the HTML fragment and ensure that it follows the sanitization rules specified by the validator or treeSanitizer.

inherited
createShadowRoot([Map shadowRootInitDict]) → ShadowRoot

inherited
deliverPropertyChanges() → void

Force any pending property changes to synchronously deliver to handlers specified in the observe object. Note, normally changes are processed at microtask time.

inherited
detached() → void

Called by the DOM when this element has been removed from the live document.

inherited
dispatchEvent(Event event) → bool

inherited
enteredView() → void

Deprecated*: override attached instead.

inherited
focus() → void

Focuses the input.

getAnimations() → List<Animation>

inherited
getAttribute(String name) → String

inherited
getAttributeNS(String namespaceURI, String localName) → String

inherited
getBoundingClientRect() → Rectangle

Returns the smallest bounding rectangle that encompasses this element's padding, scrollbar, and border.

inherited
getClientRects() → List<Rectangle>

Returns a list of bounding rectangles for each box associated with this element.

inherited
getComputedStyle([String pseudoElement]) → CssStyleDeclaration

The set of all CSS values applied to this element, including inherited and default values.

inherited
getDestinationInsertionPoints() → List<Node>

Returns a list of shadow DOM insertion points to which this element is distributed.

inherited
getElementsByClassName(String classNames) → List<Node>

Returns a list of nodes with the given class name inside this element.

inherited
getNamespacedAttributes(String namespace) → Map<String, String>

Gets a map for manipulating the attributes of a particular namespace.

inherited
hasChildNodes() → bool

Returns true if this node has any children.

inherited
injectBoundHTML(String html, [Element element]) → DocumentFragment

Inject HTML which contains markup bound to this element into a target element (replacing target element content).

inherited
insertAdjacentElement(String where, Element element) → Element

inherited
insertAdjacentHtml(String where, String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void

Parses text as an HTML fragment and inserts it into the DOM at the specified location.

inherited
insertAdjacentText(String where, String text) → void

inherited
insertAllBefore(Iterable<Node> newNodes, Node refChild) → Node

Inserts all of the nodes into this node directly before refChild.

inherited
insertBefore(Node node, Node child) → Node

Inserts all of the nodes into this node directly before refChild.

inherited
instanceTemplate(Element template) → DocumentFragment

Creates dom cloned from the given template, instantiating bindings with this element as the template model and PolymerExpressions as the binding delegate.

inherited
leftView() → void

Deprecated*: override detached instead.

inherited
matches(String selectors) → bool

inherited
matchesWithAncestors(String selectors) → bool

Checks if this element or any of its parents match the CSS selectors.

inherited
noSuchMethod(Invocation invocation) → dynamic

Invoked when a non-existent method or property is accessed.

inherited
offsetTo(Element parent) → Point

Provides the offset of this element's borderEdge relative to the specified parent.

inherited
query(String relativeSelectors) → Element

Alias for querySelector. Note this function is deprecated because its semantics will be changing in the future.

inherited
queryAll(String relativeSelectors) → ElementList<Element>

Alias for querySelectorAll. Note this function is deprecated because its semantics will be changing in the future.

inherited
querySelector(String selectors) → Element

Finds the first descendant element of this element that matches the specified group of selectors.

inherited
querySelectorAll(String selectors) → ElementList<Element>

Finds all descendent elements of this element that match the specified group of selectors.

inherited
remove() → void

Removes this node from the DOM.

inherited
removeEventListener(String type, EventListener listener(Event event), [bool useCapture]) → void

inherited
replaceWith(Node otherNode) → Node

Replaces this node with another node.

inherited
requestFullscreen() → void

inherited
requestPointerLock() → void

inherited
scroll([options_OR_x, num y]) → void

inherited
scrollBy([options_OR_x, num y]) → void

inherited
scrollIntoView([ScrollAlignment alignment]) → void

Scrolls this element into view.

inherited
scrollTo([options_OR_x, num y]) → void

inherited
setAttribute(String name, String value) → void

inherited
setAttributeNS(String namespaceURI, String name, String value) → void

inherited
setInnerHtml(String html, {NodeValidator validator, NodeTreeSanitizer treeSanitizer}) → void

Parses the HTML fragment and sets it as the contents of this element. This ensures that the generated content follows the sanitization rules specified by the validator or treeSanitizer.

inherited
toString() → String

The string representation of this element.

inherited
unbindAll() → void

This method should rarely be used and only if cancelUnbindAll has been called to prevent element unbinding. In this case, the element's bindings will not be automatically cleaned up and it cannot be garbage collected by by the system. If memory pressure is a concern or a large amount of elements need to be managed in this way, unbindAll can be called to deactivate the element's bindings and allow its memory to be reclaimed.

inherited