Container: Outer wrapper that contains the label, input and assistive text.
Label: Describes the purpose of the TextField. Accepts rich content like icons or tooltips.
Field: Accepts user's freeform text input.

Text fields are the most common form control type to accept user input. They are primarily used for short, freeform text. There are Pluma components similar to the TextField that also accept freeform text, so it's important to understand the key differences to make the most appropriate choice.

JsonFields are used specifically to validate JSON input within a textarea.
Search is a specialized TextField tailored for searching.
TextAreas are best for longer, multi-line text such as descriptions or messages.
TextFields are used for freeform text to enter short, basic data such as names or email addresses.

Best practices

Labels and placeholders

While not explicitly required, we highly recommend providing a visible label so users understand the purpose of the TextField at a glance. If visible labels aren't possible or needed, be sure to provide an accessible label.

For more information on placeholders and accessibility, see Placeholders under the Accessibility tab.

Email address

Do: Include a visible label that describes the expected data.

Don't: Use placeholders in place of visible labels.

Types

Email address

Text

The default TextField is most suitable for names, emails, and other short-form text.

Password

Password fields mask user input by default and include a toggle button to unmask and mask as needed.

Customization

In adhering with Pluma's focus on flexibility, the TextField component includes customization options beyond plain text. Customization is useful for adding richer label content or building custom assistive text.

Custom description

Descriptions are assistive text that display below the field. They can accept rich content including links.

API key

Custom description with link

A description with an inline link directs users to additional resources.

Custom label

The label accepts rich content, allowing you to include supplementary elements such as icons or optional indicators alongside the label text.

Website

Label with icon

Icons can be used to reinforce the label's meaning.

Company(optional)

Label with optional text

Supplementary text clarifies that the field is not required.

Custom error

Error messages are assistive text that display below the field. They accept rich content, allowing you to include links or formatted text that better help users resolve the issue.

API key

Error with link

An error message with a link directs users to relevant documentation or support.

Appearance

Sizes

TextFields are available in two sizes: medium and small. Medium is the default.

Name

Medium

Medium is suitable for most use cases.

Name

Small

Small is suitable for dense layouts and smaller viewports.

Icon

An icon can be used to emphasize visual meaning of the TextField, such as denoting search functionality.

Icon

Leading icons are displayed to the left of the field text.

Behaviors

States

First name

Base

The TextField has default input styling in its base resting state.

First name

Hover

Border color updates on mouse hover to signal the field is interactive.

First name

Focus

On keyboard focus, the field receives the standard 2px focus ring and the border color updates.

First name

Active

Active styles apply when the user interacts with the field.

First name

Disabled

Disabled fields cannot be interacted with. Background and text color update to indicate the field is unavailable.

First name

A spinner displays inside the field to indicate a background job is in progress.

First name

Danger

The TextField adopts danger styling to indicate there's an error. An error message displays below the field when set.

Clear button

A clear button can be enabled to reset the field to its initial empty state. The button is hidden when the field is empty.

Clear button

The clear button resets the field.

Password visibility

Password fields include a toggle icon to unmask or mask user input. The toggle icon updates to reflect the current visibility state.

Password

Password characters are masked by default.

Content

Assistive text

Assistive text displays below the TextField and gives the user information about the form field they're interacting with. Assistive text comes in different forms including descriptions and error text.

Description

Use description text to provide hints, formatting guidance, or constraints that help users enter the correct data. Short, complete sentences are preferred.

API key

Do: Provide guidance that helps users enter properly formatted data.

Error

Frame validation errors as direct instructions, not accusations. Never use "Please".

Rules

Use short, complete sentences
Frame as instructions, not prohibitions
Place inline adjacent to the field

Do: Describe the problem and how to resolve it.

Don't: Use vague error messages.

Labels

Write clear, concise labels that describe the data the TextField expects. Nouns and noun phrases are preferred.

Campaign name

Do: Use a noun that describes the data expected.

Write your campaign name

Don't: Use instructional phrases.

Placeholders

Placeholders help the user complete a field by describing what information it expects or how it should be formatted. For most TextField use cases, we recommend leaving the placeholder empty. A blank field is easier for a user to see that it must be filled before submission.

Rules

Short noun phrase or example value
Sentence case
No "Please" or "Enter your…"
No period
Use e.g. for example values

Website

Do: Use placeholders to show example text and its expected format.

Website

Don't: Repeat the label as placeholder text.

Search

The PlumaSearch component builds upon the TextField component, providing additional functionality tailored for search use cases.

TextArea

A textarea component for user input.

TextField

Anatomy

Guidelines

Choosing a form control

Best practices

Labels and placeholders

Types

Customization

Custom description

Custom label

Custom error

Appearance

Sizes

Icon

Behaviors

States

Clear button

Password visibility

Content

Assistive text

Description

Error

Rules

Labels

Placeholders

Rules

Related

Search

TextArea

On this page