HeroUI Field Error

Forms 10

About

HeroUI v3 FieldError — per-field validation error display for TextField, covering basic and custom validation, dynamic messages and multiple errors.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Field Error to your project and fits it to your theme.

Code

How HeroUI Field Error is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Input, Label, TextField } from "@heroui/react"
import { useState } from "react"

import { FieldError } from "@/components/ui/heroui-field-error"

export default function Default() {
  const [value, setValue] = useState("jr")
  const isInvalid = value.length > 0 && value.length < 3

  return (
    <TextField className="w-64" isInvalid={isInvalid}>
      <Label htmlFor="username">Username</Label>
      <Input
        id="username"
        placeholder="Enter username"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <FieldError>Username must be at least 3 characters</FieldError>
    </TextField>
  )
}