Textfield

A single line text input element.

Textfield Attributes

prop	type	default
disabled	boolean Whether the input is disabled.	false
invalid	boolean Renders the field in an invalid state. Often paired together with help-text to provide feedback about the error.	false
help-text	string The content to display as the help text.
label	string The content to display as the label.
min	number Standard input min attribute, to be used with type="number". See MDN.
max	number Standard input max attribute, to be used with type="number". See MDN.
min-length	number The minimum number of characters supported by the input. See MDN.
max-length	number The maximum number of characters supported by the input. See MDN.
name	string The name of the input element, used when submitting an HTML form. See MDN.
pattern	string Regex pattern that the value of the input must match to be valid. See MDN.
placeholder	string Text hint that occupies the text input when it is empty.
read-only	boolean Whether the input can be selected but not changed by the user.	false
required	boolean Whether user input is required on the input before form submission.	false
type	string The type of input to render. See MDN.
value	boolean The current value.

Affix Attributes

prop	type	default
aria-label	string Defines a string value that labels the affix element.
clear	boolean Displays a clear icon.	false
search	boolean Displays a search icon.	false
label	string Displays a string

Validation

Text fields can communicate to the user whether the current value is invalid. Implement your own validation logic in your app and set the error prop to display it as invalid. error is often paired with help-text to provide feedback to the user about the error.

Visual Options

Placeholder

Placeholder text can be used to describe the expected value or formatting for the w-textfield. Placeholder text will only appear when the w-textfield is empty, and should not be used as a substitute for labeling the element with a visible label.

Disabled

Keep in mind that using disabled in its current form is an anti-pattern. There will ALWAYS be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. Please consider more informative alternatives before choosing to use disabled on an element.

Affix

If you wish to use an affix you must first use the w-affix element in conjunction with w-textfield. Include the affix as a child of w-textfield and set the appropiate attributes. You must specify which slot to set the affix into (either prefix or suffix).

You can also use both a prefix and suffix

Read only

The read-only boolean attribute makes the w-textfield's text content immutable. Unlike disabled the w-textfield remains focusable and the contents can still be copied. See the MDN docs for more information.