Form input patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the Tailwind selector for focused input border color

Which Tailwind CSS class applies a blue border only when an input field is focused?

A active:border-blue-500

B hover:border-blue-500

C focus:border-blue-500

D border-blue-500

💡 Hint

Focus styles apply when the user clicks or tabs into the input.

The focus:border-blue-500 class changes the border color only when the input is focused. Other options apply on hover, active state, or always.

❓ layout

intermediate

Arrange form inputs vertically with spacing using Tailwind

Given multiple input fields inside a form, which Tailwind utility class correctly arranges them vertically with consistent spacing?

Tailwind

<form class="?">
  <input type="text" placeholder="Name" />
  <input type="email" placeholder="Email" />
  <input type="password" placeholder="Password" />
</form>

A grid grid-cols-3 gap-4

B block space-y-4

C flex flex-row space-x-4

D flex flex-col gap-4

💡 Hint

Vertical stacking with spacing uses flex column and gap utilities.

flex flex-col gap-4 stacks children vertically with a gap of 1rem (4). Other options either arrange horizontally or in a grid.

🧠 Conceptual

advanced

Accessibility: Which attribute improves screen reader experience for form inputs?

Which HTML attribute should be added to an input element to ensure screen readers correctly announce its purpose?

Tailwind

<input type="text" ? />

A aria-label="Full name"

B tabindex="-1"

C spellcheck="false"

D autocomplete="off"

💡 Hint

Screen readers rely on labels or aria-labels to describe inputs.

The aria-label attribute provides an accessible name for the input, helping screen readers announce its purpose. tabindex="-1" removes it from keyboard navigation, autocomplete and spellcheck do not affect screen reader labeling.

📝 Syntax

advanced

Identify the correct Tailwind class for disabled input styling

Which Tailwind CSS class correctly styles an input with a gray background and cursor not-allowed when disabled?

Tailwind

<input type="text" disabled class="?" />

A bg-gray-200 disabled:cursor-not-allowed

B disabled:bg-gray-200 disabled:cursor-not-allowed

C disabled:bg-gray-200 cursor-not-allowed

D bg-gray-200 cursor-not-allowed

💡 Hint

Use the 'disabled:' prefix to apply styles only when disabled.

The disabled: prefix applies styles only when the input is disabled. Option B applies both background and cursor styles conditionally. Other options apply styles always or partially.

❓ rendering

expert

What is the visual result of this Tailwind form input code?

Consider this input element:

<input type="text" placeholder="Username" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full max-w-sm" />

What will the user see when the input is focused?

Tailwind

<input type="text" placeholder="Username" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full max-w-sm" />

A A rounded input with gray border that shows a thick indigo ring around it on focus, full width up to a max width of small

B A square input with no border that turns red on focus and shrinks in width

C A rounded input with blue background and no border that expands width on focus

D An input with thick black border and no focus effect

💡 Hint

Look for border, rounded, focus:ring, and width classes.

The input has a gray border and rounded corners. On focus, the outline is removed and a 2px indigo ring appears around it. It is full width but limited to a max width of small size.