Inputs — Field grid with mixed widths

Three field rows combine full width, flexible plus fixed width, and equal columns. Use for compact related information with different expected lengths.

ReactHTML

1440 × 480

Open in new tab

Component.tsx38 lines

export default function InputsFieldGrid() {
  return (
    <div className="grid w-72 gap-4 text-neutral-900 sm:w-[26rem]">
      <div>
        <label htmlFor="grid-name" className="mb-1.5 block text-sm font-medium">Full name</label>
        <input id="grid-name" name="name" type="text" autoComplete="name" aria-describedby="grid-hint" placeholder="Enter full name" className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
      </div>
      <div className="grid grid-cols-[1fr_6rem] gap-3">
        <div className="min-w-0">
          <label htmlFor="grid-city" className="mb-1.5 block text-sm font-medium">City</label>
          <input id="grid-city" name="city" type="text" autoComplete="address-level2" aria-describedby="grid-hint" placeholder="Enter city" className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        </div>
        <div className="min-w-0">
          <label htmlFor="grid-postal" className="mb-1.5 block text-sm font-medium">Postal code</label>
          <input id="grid-postal" name="postal-code" type="text" autoComplete="postal-code" aria-describedby="grid-hint" placeholder="00000" className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        </div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div className="min-w-0">
          <label htmlFor="grid-country" className="mb-1.5 block text-sm font-medium">Country</label>
          <div className="relative">
            <select id="grid-country" name="country" autoComplete="country-name" aria-describedby="grid-hint" defaultValue="" className="h-10 w-full min-w-0 appearance-none rounded-md border border-neutral-300 bg-white pr-10 pl-3 text-sm hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <option value="" disabled>Select</option>
              <option value="first">First option</option>
              <option value="second">Other option</option>
            </select>
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="pointer-events-none absolute top-3 right-3 size-4 text-neutral-500"><path d="m6 9 6 6 6-6" /></svg>
          </div>
        </div>
        <div className="min-w-0">
          <label htmlFor="grid-phone" className="mb-1.5 block text-sm font-medium">Phone</label>
          <input id="grid-phone" name="phone" type="tel" autoComplete="tel" aria-describedby="grid-hint" placeholder="Enter phone" className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 hover:border-neutral-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
        </div>
      </div>
      <p id="grid-hint" className="sr-only">Use the contact details for this account.</p>
    </div>
  )
}

Pattern notes

When to use: Use for related fields with predictable short and long values. Pick inputs-field-anatomy when each field needs its own longer hint or error. Variations: use amount and unit in the mixed row, replace country with a type select, or make the final row full width.
Hierarchy: Full name leads, then City and Postal code, then Country and Phone. Each field is labelled and linked to the shared hint. Keep labels to 2 words and placeholders to 3; postal values up to 10 characters. The Country select has a neutral prompt and two generic choice slots.
Responsive: Only the root changes at 640px, from 288px to 416px. The second row retains its fixed 96px postal column; the last row stays equal columns. All flexible cells and controls have min-w-0 to fit the narrow frame.
Layout: A 288px (w-72) grid expands to 416px (sm:w-[26rem]) at 640px, with 16px between three rows. A full-width field leads; the second row is grid-cols-[1fr_6rem] with a 12px gap, and the third row has equal columns with a 12px gap. All controls are min-w-0, 40px high, have 12px side padding and 6px radii. Labels are 14px medium with 6px bottom spacing. A native select uses appearance-none and a 16px decorative chevron 12px from the right. A shared sr-only hint describes all five fields without adding visual height.
States: All inputs and the select change neutral-300 borders to neutral-400 on hover and show the standard 2px neutral-900 focus-visible outline offset 2px. Placeholders are neutral-500. Select choices use native behaviour; the chevron is pointer-events-none and aria-hidden.

Desktop wireframe

┌───────────────────────────────────────────────┐
│ Full name                                     │
│ ┌─────────────────────────────────────────┐   │
│ │ Enter full name                         │   │
│ └─────────────────────────────────────────┘   │
│ City                              Postal code │
│ ┌───────────────────────────┐ ┌───────────┐   │
│ │ Enter city                │ │ 00000     │   │
│ └───────────────────────────┘ └───────────┘   │
│ Country                       Phone           │
│ ┌───────────────────┐ ┌───────────────────┐   │
│ │ Select          v │ │ Enter phone       │   │
│ └───────────────────┘ └───────────────────┘   │
└───────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Label, hint and error states
Layout tags: stacked,form,compact

Inputs — Field grid with mixed widths

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Label, hint and error states