EmailField

Examples

• Code

  jsx

  <s-email-field
    label="Email"
    placeholder="bernadette.lapresse@jadedpixel.com"
    details="Used for sending notifications"
   />

  html

  <s-email-field
    label="Email"
    placeholder="bernadette.lapresse@jadedpixel.com"
    details="Used for sending notifications"
  ></s-email-field>
  

• Basic usage

  Description

  Demonstrates a simple email field with a label and required attribute, showing the most fundamental way to use the EmailField component.

  jsx

  <s-stack gap="base">
    <s-email-field label="Email address" required />
  </s-stack>

  html

  <s-stack gap="base">
    <s-email-field label="Email address" required></s-email-field>
  </s-stack>
  

• With error and help text

  Description

  Showcases an email field with additional details and an error message, illustrating how to provide contextual information and validation feedback.

  jsx

  <s-stack gap="base">
    <s-email-field
      label="Contact email"
      details="We'll send your order confirmation here"
      error="Please enter a valid email address"
      required
    />
  </s-stack>

  html

  <s-stack gap="base">
    <s-email-field
      label="Contact email"
      details="We'll send your order confirmation here"
      error="Please enter a valid email address"
      required
    ></s-email-field>
  </s-stack>
  

• Optional field with placeholder

  Description

  Illustrates an optional email field with a placeholder text and help text, demonstrating a common pattern for collecting alternative contact information.

  jsx

  <s-stack gap="base">
    <s-email-field
      label="Alternate email"
      placeholder="secondary@example.com"
      details="Additional email for notifications"
     />
  </s-stack>

  html

  <s-stack gap="base">
    <s-email-field
      label="Alternate email"
      placeholder="secondary@example.com"
      details="Additional email for notifications"
    ></s-email-field>
  </s-stack>
  

• Read-only display

  Description

  Shows how to render an email field in a read-only state, useful for displaying existing email addresses that cannot be modified.

  jsx

  <s-stack gap="base">
    <s-email-field
      label="Account email"
      value="user@example.com"
      readOnly
     />
  </s-stack>

  html

  <s-stack gap="base">
    <s-email-field
      label="Account email"
      value="user@example.com"
      readOnly
    ></s-email-field>
  </s-stack>
  

• With length constraints

  Description

  Demonstrates setting minimum and maximum length constraints for the email input, providing additional validation beyond the standard email format check.

  jsx

  <s-stack gap="base">
    <s-email-field
      label="Business email"
      minLength={5}
      maxLength={100}
      required
     />
  </s-stack>

  html

  <s-stack gap="base">
    <s-email-field
      label="Business email"
      minLength="5"
      maxLength="100"
      required
    ></s-email-field>
  </s-stack>
  

• Email validation

  Description

  Interactive example showing real-time email validation with error messages that update as the user types.

  jsx

  const [email, setEmail] = useState('invalid-email');
  const [error, setError] = useState('Please enter a valid email address');
  
  return (
    <s-section>
      <s-stack gap="base" justifyContent="start">
        <s-text-field label="Name" />
        <s-email-field
          label="Contact email"
          details="We'll send your order confirmation here"
          value={email}
          error={error}
          required
          onInput={(e) => {
            setEmail(e.currentTarget.value);
            setError(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.currentTarget.value) ? '' : 'Please enter a valid email address');
          }}
        />
      </s-stack>
    </s-section>
  )