sp-textfield

NPM

0.44.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description autocomplete autocomplete | 'list' | 'none' | HTMLInputElement['autocomplete'] | HTMLTextAreaElement['autocomplete'] | undefined What form of assistance should be provided when attempting to supply a value to the form control disabled disabled boolean false Disable this control. It will not receive focus or events grows grows boolean false Whether a form control delivered with the `multiline` attribute will change size vertically to accomodate longer input invalid invalid boolean false Whether the `value` held by the form control is invalid. label label string '' A string applied via `aria-label` to the form control when a user visible label is not provided. maxlength maxlength number -1 Defines the maximum string length that the user can enter minlength minlength number -1 Defines the minimum string length that the user can enter multiline multiline boolean false Whether the form control should accept a value longer than one line name name string | undefined Name of the form control. pattern pattern string | undefined Pattern the `value` must match to be valid placeholder placeholder string '' Text that appears in the form control when it has no value set quiet quiet boolean false Whether to display the form control with no visible background readonly readonly boolean false Whether a user can interact with the value of the form control required required boolean false Whether the form control will be found to be invalid when it holds no `value` rows rows number -1 The specific number of rows the form control should provide in the user interface tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property valid valid boolean false Whether the `value` held by the form control is valid. value 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.

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

Description #

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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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';

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>

Variants #

Valid #

Dictate the validity state of the text entry with the valid attribute.

<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>

Invalid #

Dictate the invalidity state of the text entry with the invalid attribute.

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

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>

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."

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.

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>