@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

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

Example

<sp-textfield placeholder="Enter your name"></sp-textfield>

Variants

Valid

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

<sp-textfield placeholder="Enter your name" valid></sp-textfield>

Invalid

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

<sp-textfield placeholder="Enter your name" invalid></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-textfield placeholder="Enter your name" quiet></sp-textfield>