TextArea

Examples

• Code

  jsx

  <s-text-area
    label="Shipping address"
    value="1776 Barnes Street, Orlando, FL 32801"
    rows={3}
   />

  html

  <s-text-area
    label="Shipping address"
    value="1776 Barnes Street, Orlando, FL 32801"
    rows="3"
  ></s-text-area>
  

• Basic usage

  Description

  Demonstrates a simple text area for collecting product descriptions with a placeholder and autocomplete disabled.

  jsx

  <s-text-area
    label="Product description"
    placeholder="Enter a detailed description..."
    autocomplete="off"
   />

  html

  <s-text-area
    label="Product description"
    placeholder="Enter a detailed description..."
    autocomplete="off"
  ></s-text-area>
  

• Seo meta description with character limit

  Description

  Showcases a text area for writing SEO meta descriptions with a character limit of 160, providing guidance text and a multi-line input.

  jsx

  <s-text-area
    label="Meta description"
    max-length={160}
    details="Appears in search results. Keep under 160 characters for best visibility."
    placeholder="Write a compelling description that will appear in Google search results..."
    rows={3}
    autocomplete="off"
   />

  html

  <s-text-area
    label="Meta description"
    max-length="160"
    details="Appears in search results. Keep under 160 characters for best visibility."
    placeholder="Write a compelling description that will appear in Google search results..."
    rows="3"
    autocomplete="off"
  ></s-text-area>
  

• With error state

  Description

  Demonstrates the error state of a text area with a minimum length requirement, showing how validation errors are displayed in a commerce context.

  jsx

  <s-text-area
    label="Reason for return"
    error="Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster."
    minLength={20}
    placeholder="Explain why the customer is returning this item..."
    rows={3}
    autocomplete="off"
   />

  html

  <s-text-area
    label="Reason for return"
    error="Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster."
    minLength="20"
    placeholder="Explain why the customer is returning this item..."
    rows="3"
    autocomplete="off"
  ></s-text-area>
  

• Product care instructions

  Description

  Illustrates a text area for entering detailed product care instructions, with an expanded height and supporting guidance text.

  jsx

  <s-text-area
    label="Care instructions"
    rows={6}
    details="Detailed care instructions help customers maintain their purchases and reduce returns."
    placeholder="Provide washing, storage, and maintenance instructions..."
    autocomplete="off"
   />

  html

  <s-text-area
    label="Care instructions"
    rows="6"
    details="Detailed care instructions help customers maintain their purchases and reduce returns."
    placeholder="Provide washing, storage, and maintenance instructions..."
    autocomplete="off"
  ></s-text-area>