Text Field
The Text Field component is used to allow users to provide text input when the expected input is short. As well as plain text, Text Field supports various types of text, including passwords, email addresses and telephone numbers.
The label
attribute provides a short description of the purpose of the Text Field.
If a visible label can't be used, provide one using the aria-label
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field label="First name"></vwc-text-field>
The helper-text
attribute provides additional information to help the user enter the correct information.
To add HTML to the helper text, use the helper-text slot.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field helper-text="Must be at least six chars and contain both letters and numbers" label="Password" type="password" ></vwc-text-field>
The placeholder
attribute provides an example of the type of input the user needs to enter.
Avoid using placeholder
text as a substitute for a label. Placeholder text is not a reliable label—it disappears when users type and is not always announced by screen readers. Use a label
element to ensure the Combobox is both visually and programmatically associated with a descriptive label.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field placeholder="name@domain.com" label="Email address" type="email" ></vwc-text-field>
The char-count
attribute can be use in combination with the maxlength
attribute to provide a visual character count.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field char-count maxlength="15" label="Username" helper-text="Maximum of 15 characters" ></vwc-text-field>
The value
attribute can be used the set the default value for the Text Field input element.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field value="Joe" label="Username"></vwc-text-field>
The error-text
attribute provides a custom error message. Any current error state will be overridden by error-text
.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field error-text="Username is already taken" value="Joe" label="Username" ></vwc-text-field>
The success-text
attribute provides a custom success message. Any current error state will be overridden by success-text
.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field success-text="Username is available" value="JoeB_89" label="Username" ></vwc-text-field>
The icon
attribute can set to display an icon from the icon library on the component.
The preferred way to add icons is to use the icon slot.
The icon
prop is deprecated (as of 05/25) and directly replaced with icon
slot. icon
is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field icon="search-line" label="Search" type="search" ></vwc-text-field>
The scale
attribute controls the Text Field input element display size.
Use condensed
in situations when space is limited, for example, inside a Data Grid cell.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <div class="container"> <vwc-text-field scale="normal" label="Normal"></vwc-text-field> <vwc-text-field scale="condensed" label="Condensed"></vwc-text-field> </div> <style> .container { display: flex; gap: 16px; } </style>
The reason for using scale
for form elements and not size
(as used in other components such as Button), is that size
is a HTML attribute that can be used on input
elements (and also Text Field) to control the width of the input.
The shape
attribute controls the border radius of the Text Field input element.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <div class="container"> <vwc-text-field shape="rounded" label="Rounded"></vwc-text-field> <vwc-text-field shape="pill" label="Pill"></vwc-text-field> </div> <style> .container { display: flex; gap: 16px; } </style>
The appearance
attribute controls the style of the Text Field input element.
Use ghost
in combination with a containing element which provides a border, for example Action Group.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <div class="container"> <vwc-text-field appearance="fieldset" label="Fieldset" placeholder="Appearance" ></vwc-text-field> <vwc-text-field appearance="ghost" label="Ghost" placeholder="Appearance" ></vwc-text-field> </div> <style> .container { display: flex; gap: 16px; } </style>
The disabled
attribute disables the Text Field input element.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field disabled label="Username"></vwc-text-field>
The readonly
attribute prevents the user from changing the Text Field input element value.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-text-field readonly label="Username" value="JoeB_89"></vwc-text-field>