104Get started
HextaUI

Input: Grid

Inputs fill their container, so place them in a grid. Give grid cells min-w-0 so long values can’t stretch a column.

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputGrid() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-3">
      <div className="flex min-w-0 flex-col gap-2">
        <Label htmlFor="input-first-name">First name</Label>
        <Input id="input-first-name" autoComplete="given-name" />
      </div>
      <div className="flex min-w-0 flex-col gap-2">
        <Label htmlFor="input-last-name">Last name</Label>
        <Input id="input-last-name" autoComplete="family-name" />
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/input/grid.tsx, together with the Input component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-grid.json

To add only the component, follow the Input installation.

More Input examples

See them all, with keyboard support and accessibility notes, on the Input page.

Related components