Choose a version:

Text field

The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.

The component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use text area. For specialized input types, use email field, URL field, or password field.

Support

Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the text field component.

Anchor to autocomplete autocomplete AutocompleteField | `${} ${AutocompleteField}` | `${} ${AutocompleteField}` | `${} ${} ${AutocompleteField}` | "on" | "off" Default: 'on': A hint about the intended content of the field for browser autofill.

When set to on (the default), this property indicates that the field should support autofill, but you do not have any more semantic information on the intended contents.

When set to off, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.

Alternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.

Learn more about the set of autocomplete values supported in browsers.
Anchor to defaultValue defaultValue string: The initial value of the field when it first loads. Unlike placeholder, this is a real value that the user can edit and that gets submitted with the form. Once the user starts typing, their input replaces this value.
Anchor to disabled disabled boolean Default: false: Whether the field is disabled, preventing any user interaction.
Anchor to error error string: An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators and the message is announced to screen readers.
Anchor to icon icon ['type'] Default: '': The type of icon to be displayed in the field.
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to label label string: The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.
Anchor to labelAccessibilityVisibility labelAccessibilityVisibility 'visible' | 'exclusive' Default: 'visible': Controls whether the label is visible to all users or only to screen readers.

visible: The label is shown to everyone.

exclusive: The label is visually hidden but still announced by screen readers.
Anchor to maxLength maxLength number Default: Infinity: Specifies the maximum number of characters allowed.
Anchor to minLength minLength number Default: 0: Specifies the minimum number of characters allowed.
Anchor to name name string: The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.
Anchor to prefix prefix string Default: '': A value to be displayed immediately before the editable portion of the field.

This is useful for displaying an implied part of the value, such as "https://" or "+353".

This can't be edited by the user, and it isn't included in the value of the field.

It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the prefix until the user focuses the input.
Anchor to readOnly readOnly boolean Default: false: Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.
Anchor to required required boolean Default: false: Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.
Anchor to suffix suffix string Default: '': A value to be displayed immediately after the editable portion of the field.

This is useful for displaying an implied part of the value, such as "@shopify.com", or "%".

This can't be edited by the user, and it isn't included in the value of the field.

It may not be displayed until the user has interacted with the input. For example, an inline label may take the place of the suffix until the user focuses the input.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

AutocompleteSection

The “section” scopes the autocomplete data that should be inserted to a specific area of the page. Commonly used when there are multiple fields with the same autocomplete needs in the same page. For example: 2 shipping address forms in the same page.

`section-${string}`

AutocompleteGroup

The contact information group the autocomplete data should be sourced from.

"shipping" | "billing"

IconProps

The properties for the icon component when it's used in JSX.

id
A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
```
string
```
size
The size of the icon. - `'base'`: Default size that works well for most use cases. - `'small'`: Small icon for inline use within text or compact UI elements. - `'small-200'`: Extra small icon for the most compact contexts. - `'small-100'`: Small icon suitable for tight or dense layouts. - `'large'`: Large icon for emphasis or prominent display. - `'large-100'`: Extra large icon for maximum visual impact.
```
'base' | 'small' | 'small-200' | 'small-100' | 'large' | 'large-100'
```
tone
The semantic meaning and color treatment of the icon. - `'info'`: Informational content or helpful tips. - `'auto'`: Automatically determined based on context. - `'neutral'`: General information without specific intent. - `'success'`: Positive outcomes or successful states. - `'warning'`: Important warnings about potential issues. - `'critical'`: Urgent problems or destructive actions. - `'custom'`: Inherits a custom color from its parent element's CSS.
```
'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'
```
type
The type of icon that will be displayed. You can specify an icon name from the available icon set, or use an empty string to show no icon.
```
'' | ReducedIconTypes
```

ReducedIconTypes

The subset of icon types available in checkout and customer account surfaces. This is a narrowed set from the full Shopify icon library, containing only the icons supported in these contexts.

'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'

Anchor to EventsEvents

The text field component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur blur <typeof tagName>: A callback fired when the text field loses focus.

Learn more about the blur event.
Anchor to change change <typeof tagName>: A callback fired when the text field value changes.

Learn more about the change event.
Anchor to focus focus <typeof tagName>: A callback fired when the text field receives focus.

Learn more about the focus event.
Anchor to input input <typeof tagName>: A callback fired when the user inputs data into the text field.

Learn more about the input event.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to SlotsSlots

The text field component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to accessory accessory HTMLElement: Additional interactive content displayed within the field. Accepts button and clickable components with text content only. Other component types or complex layouts are not supported.

Anchor to ExamplesExamples

Anchor to Collect a first nameCollect a first name

Add a single-line text input with a pre-filled value. This example displays a text field with an optional label and a defaultValue.

Collect a first name

A single-line text input field with a label and placeholder text.

html

<s-text-field

label="First name (optional)"

defaultValue="Taylor"

></s-text-field>

Anchor to Add a prefix and suffixAdd a prefix and suffix

Add a prefix or suffix to provide context for the expected value, such as a country code or reference type. This example shows two text fields with a prefix for a phone number and a suffix for an order reference.

html

<s-stack gap="small">

<s-text-field label="Phone number" prefix="+1"></s-text-field>

<s-text-field

label="Order reference"

value="ORD-2025-1234"

suffix="CA"

></s-text-field>

</s-stack>

Anchor to Show a validation errorShow a validation error

Display an error message when the entered value doesn't meet requirements. This example uses a text field with an error message for an invalid referral code.

html

<s-text-field

label="Referral code"

error="This referral code isn't valid"

defaultValue="REFER50"

></s-text-field>

Anchor to Best practicesBest practices

Label clearly: Write labels that describe the expected input, such as "First name (optional)" for non-required fields.
Mark optional fields: Label text fields as optional when input isn't required. For example, use "First name (optional)."
Use specialized fields: For email, URL, phone, or password input, use the corresponding specialized component instead.

Was this page helpful?