What is Form input patterns in Tailwind?

Form input patterns in Tailwind - Syntax, Examples & Explanation

Introduction

Form input patterns help check if what a user types matches a specific format. This makes sure the information is correct before sending it.

When you want users to enter a phone number in a specific style.

When you need an email address that looks valid.

When you want to accept only numbers or letters in a field.

When you want to limit input to a certain pattern like dates or postal codes.

When you want to give users instant feedback on their input format.

Syntax

Tailwind

<input type="text" pattern="your-regex-pattern" />

The pattern attribute uses regular expressions to define the allowed input format.

Browsers check the pattern when the form is submitted and show a message if it doesn't match.

Examples

Accepts a pattern like 123-45-6789 (e.g., a Social Security number format).

Tailwind

<input type="text" pattern="\d{3}-\d{2}-\d{4}" />

Accepts only emails ending with @example.com.

Tailwind

<input type="email" pattern=".+@example\.com" />

Accepts only letters, between 5 and 10 characters long.

Tailwind

<input type="text" pattern="[A-Za-z]{5,10}" />

Sample Program

This form uses Tailwind CSS for styling. It has two inputs with patterns:

Phone input requires exactly 3 digits, dash, 3 digits, dash, 4 digits.
Email input requires the email to end with @example.com.

If the user types something wrong and tries to submit, the browser will show a message and prevent submission.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Form Input Patterns Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen">
  <main class="bg-white p-8 rounded shadow-md w-full max-w-md">
    <h1 class="text-2xl font-semibold mb-6">Sign Up</h1>
    <form class="space-y-4">
      <label for="phone" class="block text-sm font-medium text-gray-700">Phone (format: 123-456-7890)</label>
      <input
        id="phone"
        name="phone"
        type="text"
        pattern="\d{3}-\d{3}-\d{4}"
        required
        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-describedby="phone-desc"
        placeholder="123-456-7890"
      />
      <p id="phone-desc" class="text-xs text-gray-500">Enter your phone number in the format shown.</p>

      <label for="email" class="block text-sm font-medium text-gray-700">Email (must end with @example.com)</label>
      <input
        id="email"
        name="email"
        type="email"
        pattern=".+@example\.com"
        required
        class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        aria-describedby="email-desc"
        placeholder="user@example.com"
      />
      <p id="email-desc" class="text-xs text-gray-500">Only emails ending with @example.com allowed.</p>

      <button
        type="submit"
        class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        Submit
      </button>
    </form>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Pattern matching only works when the form is submitted or when you check validity in JavaScript.

Use aria-describedby to connect inputs with instructions for better accessibility.

Always test your pattern carefully to avoid blocking valid input or allowing wrong input.

Summary

Use the pattern attribute to require specific input formats.

Patterns use regular expressions to define allowed characters and structure.

Tailwind CSS helps style inputs and focus states for a better user experience.