Skip to main content

TextField

The TextField 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 the TextArea component.

Support
Targets (10)

Supported targets

Use cases

  • Product identifiers: Collect product names, SKUs, or short identifiers.
  • Customer info: Capture customer names, reference numbers, or brief labels.
  • Filtering: Enable text-based filtering or tagging with short text values.
  • Form submissions: Support single-line text values like names, codes, or identifiers.

Anchor to examplesExamples

Anchor to example-capture-text-input-with-a-text-fieldCapture text input with a text field

Capture single-line text input using a TextField component with validation support. This example shows a basic text field with label and placeholder text.

Capture text input with a text field

Capture text input with a text field

<s-text-field
label="Store name"
value="Snowdevil"
required
/>

Anchor to example-add-accessory-buttonsAdd accessory buttons

Add action buttons to the text field using the accessory slot for quick actions like clearing text or submitting input. This example shows how to use s-button and s-clickable components with text content in the accessory slot, enabling inline actions without leaving the input context.

Add accessory buttons

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

Anchor to example-configure-validation-and-guidanceConfigure validation and guidance

Configure common TextField properties for validation, character limits, and user guidance. This example demonstrates using props like maxlength, required, helperText, and error to create a well-guided input experience with proper validation feedback.

Configure validation and guidance

<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.currentTarget.value)}
/>

Anchor to example-handle-input-eventsHandle input events

Subscribe to TextField events including onInput, onFocus, onBlur, and onChange to respond to user interactions. This example shows how to handle different input events for real-time validation, autosave functionality, or dynamic form behavior.

Handle input events

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

Anchor to propertiesProperties

Configure the following properties on the TextField component.

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.

Anchor to slotsSlots

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

Anchor to accessory
accessory
HTMLElement

Additional content to be displayed in the field. Commonly used to display clickable text.

Anchor to eventsEvents

The TextField component provides event callbacks for handling user interactions. Learn more about handling 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.

Anchor to best-practicesBest practices

  • Use for single-line text input: Choose TextField for short values like names, titles, or identifiers. For multi-line content, use TextArea.
  • Show character limit feedback: When approaching maxLength, display remaining characters in the details text.
  • Write descriptive labels: Use specific labels like "Product Name" or "Reference Code" rather than generic terms.

Anchor to limitationsLimitations

The accessory slot supports only Button and Clickable components with text content only—other component types or complex layouts can't be used for field accessories.

Was this page helpful?