TextField

Examples

• Basic usage

  Description

  Demonstrates a simple text input field for entering a store name with autocomplete turned off, providing a clean and straightforward input experience.

  jsx

  <s-text-field label="Store name" autocomplete="off" />

  html

  <s-text-field label="Store name" autocomplete="off"></s-text-field>
  

• With icon

  Description

  Showcases a text field enhanced with a search icon and a placeholder, creating a visually intuitive input for searching products.

  jsx

  <s-text-field
    label="Search"
    icon="search"
    placeholder="Search products..."
   />

  html

  <s-text-field
    label="Search"
    icon="search"
    placeholder="Search products..."
  ></s-text-field>
  

• Specific error messages for merchant context

  Description

  Demonstrates the importance of providing clear, actionable, and context-specific error messages that guide merchants toward correct input and understanding.

  jsx

  <s-stack gap="base">
    {/* Generic error (avoid) */}
    <s-text-field label="Product weight" error="Invalid value" />
  
    {/* Specific error (preferred) */}
    <s-text-field
      label="Product weight"
      error="Weight must be greater than 0 and less than 500 pounds for shipping calculations"
     />
  
    {/* Business rule error */}
    <s-text-field
      label="SKU"
      error="SKU 'TSHIRT-001' already exists. SKUs must be unique across all products."
     />
  </s-stack>

  html

  <s-stack gap="base">
    <!-- Generic error (avoid) -->
    <s-text-field label="Product weight" error="Invalid value"></s-text-field>
  
    <!-- Specific error (preferred) -->
    <s-text-field
      label="Product weight"
      error="Weight must be greater than 0 and less than 500 pounds for shipping calculations"
    ></s-text-field>
  
    <!-- Business rule error -->
    <s-text-field
      label="SKU"
      error="SKU 'TSHIRT-001' already exists. SKUs must be unique across all products."
    ></s-text-field>
  </s-stack>
  

• Required field with validation

  Description

  Illustrates a text field marked as required, ensuring that users must provide input before form submission, with built-in validation support.

  jsx

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

  html

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

• With prefix and suffix

  Description

  Displays text field usage with prefix and suffix

  jsx

  <s-stack gap="small">
      <s-text-field
      label="Phone number"
      prefix="+03"
      />
      <s-text-field
      label="Credit Card Number"
      value="1234 5678 9012 3456"
      suffix="VISA"
      />
  </s-stack>

  html

  <s-stack gap="small">
    <s-text-field label="Phone number" prefix="+03" />
    <s-text-field
      label="Credit Card Number"
      value="1234 5678 9012 3456"
      suffix="VISA"
    />
  </s-stack>
  

• With accessory

  Description

  Demonstrates the flexibility of adding interactive elements like buttons to text fields, enabling immediate actions based on the entered input.

  jsx

  <>
    <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
    <s-text-field label="Discount code">
      <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
    </s-text-field>
  </>

  html

  <s-tooltip id="info-tooltip">This is info tooltip</s-tooltip>
  <s-text-field label="Discount code">
    <s-icon slot="accessory" interestFor="info-tooltip" type="info" />
  </s-text-field>