Text field

A text field component allows users to enter and edit single-line textual input. It serves as a fundamental building block for various form inputs in user interfaces

UsageCodeAccessibility
  <sl-text-field id="first-name" value="John" aria-label="First name"></sl-text-field>

When to use

The following guidance describes when to use the text field component.

Unique input

When users need to input information that is unique and cannot be anticipated from a predefined set of options. Text fields provide the flexibility to capture diverse and unpredictable data.

Single-line input

Text fields are ideal for capturing single-line responses.

When not to use

Text fields may not be the best choice in the following scenarios:

Sensitive information

For handling sensitive or confidential information, such as passwords or credit card numbers, it's advisable to utilize specialized secure input fields designed to obscure the entered data for enhanced security.

Longer text responses

Consider using a text area when you anticipate the input length will exceed the width of a text field or when you encourage users to provide longer text responses.

Anatomy

ItemNameDescriptionOptional
1ContainerAn input container is a structured enclosure for user input elements. It facilitates organized and user-friendly data collection in interfaces.no
2Input & Placeholder textInput text, entered by users, and placeholder text, providing guidance or examples.yes
3Validation iconEnsures input accuracy for users.yes

Options

With these options you can tweak the appearance of the text field in Figma. They are available in the Design Panel so you can compose the text field to exactly fit the user experience need for the uses case you are working on.

ItemOptionsDescription
Sizemd lgThe text field is available in two sizes. If not specified the default value is md (medium).
Variantdefault valid invalidWhen you're working on a scenario where you show what happens when a field is skipped or filled in incorrectly you can choose a different variant to show this.
Stateidle hover active disabledThese states are applied automatically in interactive examples or can be set explicitly when the use case asks for it. Default value is idle.
PlaceholderbooleanIf the setting is enabled, the placeholder will be visible, whereas if it is disabled, the user's input will be displayed. Default value is off.
Placeholder textvalueUse placeholder text to give the user a short hint about what they need to input (e.g. a sample value or a short description of the expected format). Placeholder is not a replacement for labels. It's an optional feature that disappears once users begin entering their data.
HintbooleanTo turn to hint on or off. Default value is off.
Input TextvalueWill be shown as the value of the text field
LabelvalueProvide users with additional context about button functionality by adding a label, ensuring clarity and ease of use.
Focus ringbooleanTurn the focus ring option to show the focus state of the text field. Default value is off.
Interactive example