sp-textfield

NPM 1.5.0

View Storybook

Try it on webcomponents.dev

Overview

API

Changelog

Overview

sp-textfield components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

Usage

yarn add @spectrum-web-components/textfield

Import the side effectful registration of <sp-textfield> via:

import '@spectrum-web-components/textfield/sp-textfield.js';

When looking to leverage the Textfield base class as a type and/or for extension purposes, do so via:

import { Textfield } from '@spectrum-web-components/textfield';

Anatomy

<sp-textfield id="basic" label="Name"></sp-textfield>

Label

A text field must have a label in order to be accessible. A label can be provided either via the label attribute, like the previous example or with an <sp-field-label> element.

<sp-field-label for="with-field-label">Name</sp-field-label>
<sp-textfield id="with-field-label"></sp-textfield>

Placeholder

Use the placeholder attribute to include placeholder text. Note: Placeholder text should not be used as a replacement for a label or help help text.

<sp-field-label for="has-placeholder">Name</sp-field-label>
<sp-textfield id="has-placeholder" placeholder="ex., John Doe"></sp-textfield>

Help text

Help text can be accessibly associated with an <sp-textfield> element by using the help-text or negative-help-text slots. When using the negative-help-text slot, <sp-textfield> will self manage the presence of this content based on the value of the invalid property on your <sp-textfield> element. Content within the help-text slot will be show by default. When your <sp-textfield> should receive help text based on state outside of the complexity of invalid or not, manage the content addressed to the help-text from above to ensure that it displays the right messaging and possesses the right variant.

See help text for more information.

Self managed

<sp-field-label for="self">Stay "Positive"</sp-field-label>
<sp-textfield id="self" pattern="[P][o][s][i][t][i][v][e]" value="Positive">
    <sp-help-text slot="help-text">
        Tell us how you are feeling today.
    </sp-help-text>
    <sp-help-text slot="negative-help-text">Please be "Positive".</sp-help-text>
</sp-textfield>

Managed from above

<sp-field-label for="managed">Stay "Positive"</sp-field-label>
<sp-textfield
    id="managed"
    pattern="[P][o][s][i][t][i][v][e]"
    value="Positive"
    oninput='
        const helpText = this.querySelector(`[slot="help-text"]`);
        helpText.textContent = this.invalid ? `Please be "Positive".` : `Tell us how you are feeling today.`;
        helpText.variant = this.invalid ? `negative` : `neutral`;
    '
>
    <sp-help-text slot="neutral-text">
        Tell us how you're feeling today.
    </sp-help-text>
    <sp-help-text slot="help-text">Please be "Positive".</sp-help-text>
</sp-textfield>

Options

Sizes

Small

<sp-field-label size="s" for="name-0-s">Name</sp-field-label>
<sp-textfield
    size="s"
    id="name-0-s"
    placeholder="Enter your name"
></sp-textfield>

Medium

<sp-field-label for="name-0-m">Name</sp-field-label>
<sp-textfield id="name-0-m" placeholder="Enter your name"></sp-textfield>

Large

<sp-field-label size="l" for="name-0-l">Name</sp-field-label>
<sp-textfield
    size="l"
    id="name-0-l"
    placeholder="Enter your name"
></sp-textfield>

Extra Large

<sp-field-label size="xl" for="name-0-xl">Name</sp-field-label>
<sp-textfield
    size="xl"
    id="name-0-xl"
    placeholder="Enter your name"
></sp-textfield>

Types

When inputting URLs, telephone numbers, email addresses, or passwords, specify a type to provide user affordances like mobile keyboards and obscured characters:

url
tel
email
password
text (default)

<sp-field-label for="tel-1">Telephone</sp-field-label>
<sp-textfield
    id="tel-1"
    type="tel"
    placeholder="Enter your phone number"
></sp-textfield>
<sp-field-label for="password-1">Password</sp-field-label>
<sp-textfield id="password-1" type="password"></sp-textfield>

If the type attribute is not specified, or if it does not match any of these values, the default type adopted is "text."

Quiet

The quiet style works best when a clear layout (vertical stack, table, grid) assists in a user's ability to parse the element. Too many quiet components in a small space can be hard to read.

<sp-field-label for="name-3">Name (quietly)</sp-field-label>
<sp-textfield id="name-3" placeholder="Enter your name" quiet></sp-textfield>

States

Use the required attribute to indicate a textfield value is required. Dictate the validity or invalidity state of the text entry with the valid or invalid attributes.

<sp-field-label for="name-1" required>Name</sp-field-label>
<sp-textfield
    id="name-1"
    placeholder="Enter your name"
    valid
    value="My Name"
></sp-textfield>
<br />
<sp-field-label for="name-2" required>Name</sp-field-label>
<sp-textfield id="name-2" invalid placeholder="Enter your name"></sp-textfield>

Accessibility

Include a label

Every text field should have a label. A field without a label is ambiguous and not accessible.

Include help text

The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input. This includes information such as:

An overall description of the input field
Hints for what kind of information needs to be input
Specific formatting examples or requirements

Learn more about using help text.

Include negative help text

Write error messaging in a human-centered way by guiding a user and showing them a solution — don’t simply state what’s wrong and then leave them guessing as to how to resolve it. Ambiguous error messages can be frustrating and even shame-inducing for users. Also, keep in mind that something that a system may deem an error may not actually be perceived as an error to a user.

Learn more about writing error messages.

Do not us a placeholder as a replacement for a label or help-text

Putting instructions for how to complete an input, requirements, or any other essential information into placeholder text is not accessible. Once a value is entered, placeholder text is no longer viewable; if someone is using an automatic form filler, they will never get the information in the placeholder text.

Instead, use the help text description to convey requirements or to show any formatting examples that would help user comprehension. If there's placeholder text and help text at the same time, it becomes redundant and distracting, especially if they're communicating the same thing.

Patch Changes

Updated dependencies [165a904]:
- @spectrum-web-components/help-text@1.5.0
- @spectrum-web-components/icon@1.5.0
- @spectrum-web-components/icons-ui@1.5.0
- @spectrum-web-components/icons-workflow@1.5.0
- @spectrum-web-components/base@1.5.0
- @spectrum-web-components/shared@1.5.0

1.4.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/help-text@1.4.0
- @spectrum-web-components/icon@1.4.0
- @spectrum-web-components/icons-ui@1.4.0
- @spectrum-web-components/icons-workflow@1.4.0
- @spectrum-web-components/base@1.4.0
- @spectrum-web-components/shared@1.4.0

1.3.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/help-text@1.3.0
- @spectrum-web-components/icon@1.3.0
- @spectrum-web-components/icons-ui@1.3.0
- @spectrum-web-components/icons-workflow@1.3.0
- @spectrum-web-components/base@1.3.0
- @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/textfield

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/textfield

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/textfield

1.1.0 (2025-01-29)

Bug Fixes

lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/textfield

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/textfield

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/textfield

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/textfield

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/textfield

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/textfield

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/textfield

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/textfield

0.47.0 (2024-08-20)

Features

breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/textfield

0.44.0 (2024-07-15)

Bug Fixes

number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)

Features

contextual-help: add contextual help pattern (#4285) (a259aa3)

0.43.0 (2024-06-11)

Bug Fixes

number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)

Features

contextual-help: add contextual help pattern (#4285) (a259aa3)

0.42.5 (2024-05-24)

Bug Fixes

number-field: select full value when using Tab to enter a field with a unit (#4340) (a9d5cef)

0.42.4 (2024-05-14)

Bug Fixes

textfield: textarea actually grows with multiline (#4271) (d8d0e84)

0.42.3 (2024-05-01)

Bug Fixes

textfield: textarea actually grows with multiline (#4271) (d8d0e84)

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/textfield

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/textfield

0.42.0 (2024-03-19)

Features

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/textfield

0.41.1 (2024-02-22)

Bug Fixes

textfield: clearly mark/support "multiline" as a requirement of "grows" (a3e464d)

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/textfield

0.40.5 (2024-02-05)

Bug Fixes

combobox: add combobox pattern (#3894) (47d7d71), closes #3887

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/textfield

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/textfield

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/textfield

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/textfield

0.40.0 (2023-11-16)

Features

textfield: added name attribute to textfield (#3752) (593005a)

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/textfield

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/textfield

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/textfield

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/textfield

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/textfield

0.38.0 (2023-09-05)

Bug Fixes

correct composition entry of multi-byte numbers (#3610) (5e11934)

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/textfield

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/textfield

0.35.0 (2023-07-31)

Bug Fixes

number-field: update button label to use number-field-labels as part of the text (#3474) (b92daf2)
setting title when textfield is invalid (36d0537)
textfield: add support for [grows] when [multiline] (3b306d4)
textfield: update focus state when [multiline][quiet] (#3452) (a7f563a)

0.34.0 (2023-07-11)

Bug Fixes

number-field,search,textfield: add t-shirt sizes (fda8f96)
textfield: add rows attribute (#3356) (1ee1c37)

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/textfield

0.33.0 (2023-06-08)

Bug Fixes

number-field: simplify width management (ef4765a)

0.32.0 (2023-06-01)

Features

search,textfield: use core tokens (2ed5135)

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/textfield

0.30.0 (2023-05-03)

Bug Fixes

add support for "readonly" attribute (4bce3b7)
apply "HelpTextMixin" to form elements (a952447)
apply Focuable styles in class extensions (38f7afd)
button: relate to this.href correctly (fade3ea)
correct @element jsDoc listing across library (c97a632)
correct sp-textfield[multiline][grows] styling and add story for regression testing (58c9331)
disallow undefined property for min and maxlength (21547f7)
include "type" in package.json, generate custom-elements.json (1a8d716)
include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
minlength now accepted as minimum length for value.toString (bc3b1c2)
normalize "event" and "error" argument names (8d382cd)
number-field: process 2 byte characters as their single byte cousins (f424c0a)
prevent tabindex=-1 elements from placing focus on their host (1ac1293)
stop merging selectors in a way that alters the cascade (369388f)
textfield: add 'u' flag to keep consistency with native input element (0af779f)
textfield: add maxlength and minlength attributes (5326649)
textfield: add select() API mapping to shadow DOM element (d467a34)
textfield: break very long words within the Textarea's sizer element (2f95ac0)
textfield: correct "multiline" and "grows" delivery (fa0ac34)
textfield: leverage aria-invalid attribute (e718c0a)
textfield: prevent IME selection misalignment in Safari when using hiragana input modality (f8e1e70)
textfield: process ".is-focused" and ".is-keyboardFocused" styles (48fd67d)
textfield: reimplement min/maxlength (23a4c2e)
textfield: remove use of sp-icons-* (9a5c213)
textfield: respect resize styling (04993c3)
textfield: respect type=text|url|tel|email|password (1b7a59a)
textfield: update for easier extensibility (9deaf9e)
textfield: update validation path, add "allowed-keys" (ae9f85d)
textfield: Use correct filename in exports field (637b166)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use icons without "size" values (3fc7c91)
use latest @spectrum-css/* versions (c35eb86)

Features

action-button: add action button pattern (03ac00a)
adopt DNA@7 base Spectrum CSS (e08cafd)
delivery dev mode messages in various packages (62370a1)
icons-workflow: vend fully registered icon components (941f3a4)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
pass through autocomplete attribute to inputs (5416510)
search: use Spectrum CSS ^3.0.0 (7830ac0)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
textfield: add support for setSelectionRange (#2070) (dd17ba0)
textfield: update spectrum css input (2ce4ba2)
textfield: use Spectrum CSS ^3.0.0 (1c1acb9)
update lit-* dependencies, wip (377f3c8)
use :focus-visable (via polyfill) instead of :focus (11c6fc7)
use @adobe/spectrum-css@2.15.1 (3918888)
use latest exports specification (a7ecf4b)

Performance Improvements

use "sideEffects" listing in package.json (7271614)
use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts

Revert "chore: release new versions" (a6d655d)

0.13.15 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.14 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.13 (2023-03-22)

Bug Fixes

minlength now accepted as minimum length for value.toString (bc3b1c2)

0.13.12 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.11 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.10 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.9 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.8 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.7 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.6 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.5 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.4 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.3 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/textfield

0.13.0 (2022-08-09)

Features

include all Dev Mode files in side effects (f70817c)

0.12.0 (2022-08-04)

Features

delivery dev mode messages in various packages (62370a1)

0.11.10 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.9 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.8 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.7 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.6 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.5 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.4 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.3 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.2 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/textfield

0.11.1 (2022-02-22)

Bug Fixes

textfield: correct "multiline" and "grows" delivery (fa0ac34)

0.11.0 (2022-01-26)

Bug Fixes

number-field: process 2 byte characters as their single byte cousins (f424c0a)

Features

textfield: add support for setSelectionRange (#2070) (dd17ba0)

0.10.2 (2022-01-07)

Bug Fixes

textfield: prevent IME selection misalignment in Safari when using hiragana input modality (f8e1e70)

0.10.1 (2021-12-13)

Bug Fixes

apply "HelpTextMixin" to form elements (a952447)

0.10.0 (2021-11-08)

Features

update lit-* dependencies, wip (377f3c8)

0.9.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.9.0 (2021-11-02)

Bug Fixes

textfield: respect type=text|url|tel|email|password (1b7a59a)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)

0.8.16 (2021-10-12)

Bug Fixes

textfield: respect resize styling (04993c3)

0.8.15 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.14 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.13 (2021-08-24)

Bug Fixes

correct @element jsDoc listing across library (c97a632)

0.8.12 (2021-08-03)

Bug Fixes

textfield: break very long words within the Textarea's sizer element (2f95ac0)

0.8.11 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.10 (2021-07-01)

Bug Fixes

correct sp-textfield[multiline][grows] styling and add story for regression testing (58c9331)

0.8.9 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.8 (2021-06-07)

Bug Fixes

textfield: add select() API mapping to shadow DOM element (d467a34)

0.8.7 (2021-05-24)

Bug Fixes

prevent tabindex=-1 elements from placing focus on their host (1ac1293)
textfield: update for easier extensibility (9deaf9e)

0.8.6 (2021-05-12)

Bug Fixes

textfield: add 'u' flag to keep consistency with native input element (0af779f)

0.8.5 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.4 (2021-03-29)

Bug Fixes

textfield: leverage aria-invalid attribute (e718c0a)

0.8.3 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.2 (2021-03-22)

Bug Fixes

add support for "readonly" attribute (4bce3b7)

0.8.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/textfield

0.8.0 (2021-03-04)

Features

use latest exports specification (a7ecf4b)

0.7.3 (2021-02-11)

Bug Fixes

update to latest spectrum-css packages (a5ca19f)

0.7.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/textfield

0.7.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/textfield

0.7.0 (2021-01-21)

Bug Fixes

disallow undefined property for min and maxlength (21547f7)
textfield: reimplement min/maxlength (23a4c2e)
use icons without "size" values (3fc7c91)
button: relate to this.href correctly (fade3ea)
include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
textfield: process ".is-focused" and ".is-keyboardFocused" styles (48fd67d)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
textfield: update spectrum css input (2ce4ba2)

0.6.0 (2021-01-13)

Bug Fixes

use icons without "size" values (3fc7c91)
button: relate to this.href correctly (fade3ea)
include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
textfield: process ".is-focused" and ".is-keyboardFocused" styles (48fd67d)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

action-button: add action button pattern (03ac00a)
icons-workflow: vend fully registered icon components (941f3a4)
textfield: update spectrum css input (2ce4ba2)

0.5.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/textfield

0.5.3 (2020-10-12)

Bug Fixes

include default export in the "exports" fields (f32407d)

0.5.2 (2020-09-25)

Bug Fixes

update side effect listings (8160d3a)

0.5.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/textfield

0.5.0 (2020-08-31)

Features

search: use Spectrum CSS ^3.0.0 (7830ac0)
textfield: use Spectrum CSS ^3.0.0 (1c1acb9)

0.4.4 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/textfield

0.4.3 (2020-07-27)

Note: Version bump only for package @spectrum-web-components/textfield

0.4.2 (2020-07-24)

Note: Version bump only for package @spectrum-web-components/textfield

0.4.1 (2020-07-22)

Bug Fixes

textfield: Use correct filename in exports field (637b166)

0.4.0 (2020-07-17)

Features

leverage "exports" field in package.json (321abd7)

0.3.9 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.8 (2020-05-08)

Bug Fixes

textfield: add maxlength and minlength attributes (5326649)

0.3.7 (2020-04-16)

Bug Fixes

textfield: remove use of sp-icons-* (9a5c213)

Performance Improvements

use "sideEffects" listing in package.json (7271614)

0.3.6 (2020-04-10)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.5 (2020-04-07)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.4 (2020-03-25)

Bug Fixes

textfield: update validation path, add "allowed-keys" (ae9f85d)

0.3.3 (2020-03-11)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.2 (2020-02-05)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.1 (2020-02-01)

Note: Version bump only for package @spectrum-web-components/textfield

0.3.0 (2020-01-30)

Features

pass through autocomplete attribute to inputs (5416510)

0.2.4 (2020-01-06)

Note: Version bump only for package @spectrum-web-components/textfield

0.2.3 (2019-12-12)

Bug Fixes

apply Focuable styles in class extensions (38f7afd)

0.2.2 (2019-12-02)

Bug Fixes

normalize "event" and "error" argument names (8d382cd)

0.2.1 (2019-11-27)

Bug Fixes

include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19)

Features

use :focus-visable (via polyfill) instead of :focus (11c6fc7)
use @adobe/spectrum-css@2.15.1 (3918888)

0.1.5 (2019-11-01)

Note: Version bump only for package @spectrum-web-components/textfield

0.1.4 (2019-10-14)

Performance Improvements

use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/textfield

Attributes and Properties

Property

Attribute

Type

Default

Description

autocomplete

What form of assistance should be provided when attempting to supply a value to the form control

disabled

boolean

false

Disable this control. It will not receive focus or events

grows

boolean

false

Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input

invalid

boolean

false

Whether the `value` held by the form control is invalid.

label

string

''

A string applied via `aria-label` to the form control when a user visible label is not provided.

maxlength

number

-1

Defines the maximum string length that the user can enter

minlength

number

-1

Defines the minimum string length that the user can enter

multiline

boolean

false

Whether the form control should accept a value longer than one line

name

string | undefined

Name of the form control.

pattern

string | undefined

Pattern the `value` must match to be valid

placeholder

string

''

Text that appears in the form control when it has no value set

quiet

boolean

false

Whether to display the form control with no visible background

readonly

boolean

false

Whether a user can interact with the value of the form control

required

boolean

false

Whether the form control will be found to be invalid when it holds no `value`

rows

number

-1

The specific number of rows the form control should provide in the user interface

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

valid

boolean

false

Whether the `value` held by the form control is valid.

value

string | number

The value held by the form control

Slots

Name

Description

help-text

default or non-negative help text to associate to your form element

negative-help-text

negative help text to associate to your form element when `invalid`

Events

Name

Type

Description

change

Event

An alteration to the value of the element has been committed by the user.

input

Event

The value of the element has changed.

Spectrum Web Components

sp-textfield

Overview

Usage

Anatomy

Label

Placeholder

Help text

Options

Sizes

Types

Quiet

States

Accessibility

Include a label

Include help text

Include negative help text

Do not us a placeholder as a replacement for a label or help-text

Changelog

Patch Changes

1.4.0

Patch Changes

1.3.0

Patch Changes

1.2.0 (2025-02-27)

1.1.2 (2025-02-12)

1.1.1 (2025-01-29)

1.1.0 (2025-01-29)

Bug Fixes

1.0.3 (2024-12-09)

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

Features

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

0.44.0 (2024-07-15)

Bug Fixes

Features

0.43.0 (2024-06-11)

Bug Fixes

Features

0.42.5 (2024-05-24)

Bug Fixes

0.42.4 (2024-05-14)

Bug Fixes

0.42.3 (2024-05-01)

Bug Fixes

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Features

0.41.2 (2024-03-05)

0.41.1 (2024-02-22)

Bug Fixes

0.41.0 (2024-02-13)

0.40.5 (2024-02-05)

Bug Fixes

0.40.4 (2024-01-29)

0.40.3 (2024-01-11)

0.40.2 (2023-12-18)

0.40.1 (2023-12-05)

0.40.0 (2023-11-16)

Features

0.39.4 (2023-11-02)

0.39.3 (2023-10-18)

0.39.2 (2023-10-13)

0.39.1 (2023-10-06)

0.39.0 (2023-09-25)

0.38.0 (2023-09-05)

Bug Fixes

0.37.0 (2023-08-18)

0.36.0 (2023-08-18)

0.35.0 (2023-07-31)

Bug Fixes

Spectrum
Web Components