Form input patterns in Tailwind

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="[e-mail]"
      />
      <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>

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.

Practice

1. Which Tailwind CSS class is used to add a border around a form input field?

easy

A. flex

B. bg-blue-500

C. text-center

D. border

Solution

1. Step 1: Understand Tailwind border utility

   The border class adds a 1px solid border around an element, commonly used for inputs.

2. Step 2: Identify other classes' purposes

   bg-blue-500 changes background color, text-center centers text, and flex applies flexbox layout, none add borders.

3. Final Answer:

   border -> Option D

4. Quick Check:

   Border around input = border [OK]

Hint: Border class adds visible border to inputs quickly [OK]

Common Mistakes:

• Confusing background color with border
• Using layout classes instead of border
• Forgetting to add border class for input outlines

2. Which of the following is the correct Tailwind class to make a form input field have rounded corners?

easy

A. rounded-lg

B. rounded-none

C. rounded-full

D. rounded-0

Solution

1. Step 1: Understand Tailwind rounding classes

   rounded-lg applies medium-large rounded corners to elements, suitable for inputs.

2. Step 2: Check other options

   rounded-full makes fully circular corners, rounded-none removes rounding, and rounded-0 is invalid in Tailwind.

3. Final Answer:

   rounded-lg -> Option A

4. Quick Check:

   Medium rounded corners = rounded-lg [OK]

Hint: Use rounded-lg for nicely curved input corners [OK]

Common Mistakes:

• Using rounded-full for rectangular inputs
• Choosing invalid class rounded-0
• Confusing no rounding with rounded-none

3. What will be the visual effect of this input element?

<input type="text" class="border border-gray-400 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />

medium

A. Input with gray border, padding, rounded corners, and blue ring on focus

B. Input with no border and no focus effect

C. Input with red border and shadow on focus

D. Input with large padding but no border or focus style

Solution

1. Step 1: Analyze border and padding classes

   border border-gray-400 adds a gray border, p-2 adds padding inside the input, rounded-md rounds corners moderately.

2. Step 2: Understand focus styles

   focus:outline-none removes default outline, focus:ring-2 focus:ring-blue-500 adds a blue ring around input on focus.

3. Final Answer:

   Input with gray border, padding, rounded corners, and blue ring on focus -> Option A

4. Quick Check:

   Focus ring + gray border + padding = Input with gray border, padding, rounded corners, and blue ring on focus [OK]

Hint: Focus:ring adds colored ring on input focus [OK]

Common Mistakes:

• Ignoring focus:ring classes
• Confusing border colors
• Assuming default outline remains

4. Identify the error in this Tailwind input class usage:

<input class="border-2 rounded focus:ring-blue-400 focus:ring" />

medium

A. Missing padding class for input spacing

B. border-2 is invalid, should be border

C. Incorrect use of focus:ring without ring size

D. rounded class is not valid in Tailwind

Solution

1. Step 1: Check border and rounding classes

   border-2 is valid for 2px border, rounded is valid for small rounding.

2. Step 2: Analyze focus:ring usage

   focus:ring requires a size like focus:ring-2 to show ring thickness; missing size means no visible ring.

3. Final Answer:

   Incorrect use of focus:ring without ring size -> Option C

4. Quick Check:

   Focus:ring needs size like ring-2 [OK]

Hint: Always add ring size with focus:ring for visible effect [OK]

Common Mistakes:

• Omitting ring size after focus:ring
• Thinking border-2 is invalid
• Assuming rounded is not a Tailwind class

5. You want to create a responsive form input that has:
- A border that changes color on focus
- Rounded corners
- Padding inside
- A shadow only on focus
Which Tailwind class combination achieves this best?

hard

A. border-2 border-red-500 rounded-full p-1 focus:ring focus:ring-red-300

B. border border-gray-300 rounded-md p-3 focus:border-blue-600 focus:ring-2 focus:ring-blue-600 focus:shadow-lg

C. border border-black rounded-none p-4 focus:outline-none

D. border border-gray-400 rounded-lg p-2

Solution

1. Step 1: Check border and focus color change

   border border-gray-300 sets default border, focus:border-blue-600 changes border color on focus.

2. Step 2: Verify rounding, padding, and shadow on focus

   rounded-md rounds corners, p-3 adds padding, focus:ring-2 focus:ring-blue-600 adds blue ring on focus, and focus:shadow-lg adds shadow only on focus.

3. Step 3: Compare other options

   border-2 border-red-500 rounded-full p-1 focus:ring focus:ring-red-300 uses full rounding and no shadow, C lacks shadow and focus border color, D lacks focus effects.

4. Final Answer:

   border border-gray-300 rounded-md p-3 focus:border-blue-600 focus:ring-2 focus:ring-blue-600 focus:shadow-lg -> Option B

5. Quick Check:

   Focus border + shadow + padding + rounding = border border-gray-300 rounded-md p-3 focus:border-blue-600 focus:ring-2 focus:ring-blue-600 focus:shadow-lg [OK]

Hint: Combine focus:border, focus:ring, and focus:shadow for focus styles [OK]

Common Mistakes:

• Missing focus shadow effect
• Using rounded-full instead of moderate rounding
• Not changing border color on focus