formsBeginnerfocus

Input with Icon

Text input with a leading icon and label.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a labeled text input with Tailwind: a label above and an input with a leading icon (e.g. user, mail). On focus the border color shifts to a brand accent. Use rounded corners, subtle shadow, and 1.5rem horizontal padding to give the icon space.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/inputs/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-input-icon
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-sm p-6 w-full">
<label for="Email">
      <span class="text-sm font-medium text-gray-700"> Email </span>

      <input
        type="email"
        id="Email"
        class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
      />
    </label>
  </div>
</div>