104Get started
HextaUI

Input: Native validation

Fields with required, type="email" or pattern only turn red after someone has typed in them or tried to submit, never on first render. A submit that finds a field invalid shakes it once, so the eye lands on what needs fixing. It never shakes while you type or tab around. Submit the empty form to see it.

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

export function InputNativeValidation() {
  return (
    <form className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-native-email">Email</Label>
        <Input
          id="input-native-email"
          name="email"
          type="email"
          required
          placeholder="[email protected]"
        />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-native-code">Invite code</Label>
        <Input
          id="input-native-code"
          name="code"
          required
          pattern="[A-Z]{4}-[0-9]{4}"
          placeholder="ABCD-1234"
        />
      </div>
      <Button type="submit" className="self-start">
        Join
      </Button>
    </form>
  )
}

Add this example

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

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

To add only the component, follow the Input installation.

Props in this example

The Input props this example sets, from the API reference.

Input

PropTypeDefault
type
string"text"

Every prop is in the Input API reference.

More Input examples

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

Related components