Choose a version:

TextField

Captures single-line text input from merchants. Use to collect short, free-form information.

Anchor to propertiesProperties

Anchor to details details string: Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to id id string: A unique identifier for the element.
Anchor to label label string: Content to use as the field label.
Anchor to maxLength maxLength number Default: Infinity: Specifies the maximum number of characters allowed.
Anchor to placeholder placeholder string: A short hint that describes the expected value of the field.
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 value value string: The current value for the field. If omitted, the field will be empty.

Was this section helpful?

Anchor to slotsSlots

Learn more about using slots

Anchor to accessory accessory HTMLElement: Additional content to be displayed in the field. Commonly used to display clickable text.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to blur blur (event: <"s-text-field">) => void: Callback when the element loses focus.
Anchor to change change (event: <"s-text-field">) => void: Callback after editing completes (typically on blur).
Anchor to focus focus (event: <"s-text-field">) => void: Callback when the element receives focus.
Anchor to input input (event: <"s-text-field">) => void: Callback when the user makes any changes in the field.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-text-field

label="Store name"

value="Snowdevil"

required

Preview

Anchor to examplesExamples

Advanced usage patterns for TextField component

Anchor to example-event-handlingEvent handling

Handle TextField events: onInput, onFocus, onBlur, and onChange.

Anchor to example-accessory-slotAccessory slot

Add action buttons using the accessory slot. Only s-button and s-clickable are supported, with text content only

Anchor to example-common-propsCommon props

Common TextField props for validation, constraints, and user guidance.

Was this section helpful?

Event handling

<s-text-field

label="Product SKU"

placeholder="Enter SKU"

onInput={(event) => {

console.log('Input:', event.target.value);

console.log('Current error:', event.target.error);

}}

onFocus={(event) => {

console.log('Focused with value:', event.target.value);

}}

onBlur={(event) => {

console.log('Blurred with value:', event.target.value);

}}

onChange={(event) => {

console.log('Changed to:', event.target.value);

}}

Examples

Event handling

Description

Handle TextField events: onInput, onFocus, onBlur, and onChange.

Default

<s-text-field
  label="Product SKU"
  placeholder="Enter SKU"
  onInput={(event) => {
    console.log('Input:', event.target.value);
    console.log('Current error:', event.target.error);
  }}
  onFocus={(event) => {
    console.log('Focused with value:', event.target.value);
  }}
  onBlur={(event) => {
    console.log('Blurred with value:', event.target.value);
  }}
  onChange={(event) => {
    console.log('Changed to:', event.target.value);
  }}
/>

Accessory slot

Description

Add action buttons using the accessory slot. Only `s-button` and `s-clickable` are supported, with text content only

Default

<s-text-field label="Discount code" value="SUMMER2024">
  <s-button slot="accessory" onClick={() => console.log('Apply discount')}>
    Apply
  </s-button>
</s-text-field>;

Common props

Description

Common TextField props for validation, constraints, and user guidance.

Default

<s-text-field
  label="Product SKU"
  value={sku}
  placeholder="Enter SKU"
  details="Use format: ABC-123"
  error={hasError ? "SKU already exists" : undefined}
  disabled={isProcessing}
  required
  maxLength={20}
  onChange={(event) => setSku(event.target.value)}
/>