TextField

Examples

• Description

  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

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

• Description

  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`](/docs/api/pos-ui-extensions/2026-01/web-components/actions/button) and [`s-clickable`](/docs/api/pos-ui-extensions/2026-01/web-components/actions/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>;

• Description

  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)}
  />

• Description

  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);
    }}
  />