Edit in GitHubLog an issue

sp-textfield

Since: UXP 4.1, PS 22.0.0

Renders a text field with optional associated label.

Text areas

See:

Example

Copied to your clipboard
1<sp-textfield placeholder="Phone Number">
2 <sp-label isrequired="true" slot="label">Phone Number</sp-label>
3</sp-textfield>

Variants and states#

There are several different variants for text fields.

Disabled#

Indicates that the text field is disabled.

Copied to your clipboard
<sp-textfield disabled placeholder="Phone Number"><sp-textfield>

Valid#

Indicates that the value of the text field is valid.

Copied to your clipboard
<sp-textfield valid placeholder="Phone Number"><sp-textfield>

Invalid#

Indicates that the value of the text field is invalid.

Copied to your clipboard
<sp-textfield invalid placeholder="Phone Number"><sp-textfield>

Quiet#

Styles the text field in a quieter, simpler appearance.

Copied to your clipboard
<sp-textfield quiet placeholder="Phone Number"><sp-textfield>

Numeric fields#

Restricts the text field to numeric data. You cannot currently specify minimum, maximum, or steps. The numeric value must be between -214,748.36 and 214,748.36, or an error will be displayed and the value capped to the nearest acceptable value.

Copied to your clipboard
<sp-textfield type="number" placeholder="Age"><sp-textfield>

Search fields#

Adds a search icon to indicate that the text will be used for searching.

Copied to your clipboard
<sp-textfield type="search" placeholder="Age"><sp-textfield>

Password fields#

Styles the entered text in a way that it is not visible what is being typed.

Copied to your clipboard
<sp-textfield type="password" placeholder="Age"><sp-textfield>

Responding to events#

You can respond to changes on the text area using the change and input events.

Copied to your clipboard
1document.querySelector(".yourTextField").addEventListener("input", evt => {
2 console.log(`New value: ${evt.target.value}`);
3})
Copyright © 2021 Adobe. All rights reserved.