Components
Loading preview...
HeroUI v3 FieldError — per-field validation error display for TextField, covering basic and custom validation, dynamic messages and multiple errors.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-field-error"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>
)
}