Skip to content
Lenso UI

FieldError

Displays validation error messages for form fields

Usage

import { FieldError } from '@lenso/ui';
"use client";// Adapted from HeroUI v3.2.6, Apache-2.0.import { FieldError, Input, Label, TextField } from "@lenso/ui";import { useState } from "react";import { demoStyles } from "../../demo.stylex";
export function Basic() {  const [value, setValue] = useState("jr");  const invalid = value.length > 0 && value.length < 3;  return (    <TextField xstyle={demoStyles.field} invalid={invalid}>      <Label>Username</Label>      <Input placeholder="Enter username" value={value} onValueChange={setValue} />      {invalid && <FieldError match>Username must be at least 3 characters</FieldError>}    </TextField>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

The FieldError component displays validation error messages for form fields. It automatically appears when the parent field is marked as invalid and provides smooth opacity transitions.

Examples

Basic Validation

export function Basic() {  const [value, setValue] = useState("");  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>  );}

With Dynamic Messages

<TextField isInvalid={errors.length > 0}>  <Label>Password</Label>  <Input type="password" />  <FieldError>    {(validation) => validation.validationErrors.join(', ')}  </FieldError></TextField>

Custom Validation Logic

function EmailField() {  const [email, setEmail] = useState('');  const isInvalid = email.length > 0 && !email.includes('@');
  return (    <TextField isInvalid={isInvalid}>      <Label>Email</Label>      <Input        type="email"        value={email}        onChange={(e) => setEmail(e.target.value)}      />      <FieldError>Email must include @ symbol</FieldError>    </TextField>  );}

Multiple Error Messages

<TextField isInvalid={hasErrors}>  <Label>Username</Label>  <Input />  <FieldError>    {errors.map((error, i) => (      <div key={i}>{error}</div>    ))}  </FieldError></TextField>

Customization

Tailwind CSS

"use client";// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.import { FieldError, Input, Label, TextField } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { useId, useState } from "react";
const styles = stylex.create({  field: { width: 256, maxWidth: "100%" },  input: {    backgroundColor: "var(--field-background)",    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",  },  error: { fontWeight: 500 },});
export function CustomStyles() {  const [value, setValue] = useState("jr");  const id = useId();  const invalid = value.length > 0 && value.length < 3;  return (    <TextField xstyle={styles.field} invalid={invalid}>      <Label htmlFor={id}>Handle</Label>      <Input        xstyle={styles.input}        id={id}        placeholder="min. 3 characters"        value={value}        onValueChange={setValue}      />      {invalid && (        <FieldError match xstyle={styles.error}>          Handle must be at least 3 characters        </FieldError>      )}    </TextField>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the FieldError component classes, you can use the @layer components directive. Learn more.

@layer components {  .field-error {    @apply font-medium text-danger;  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The FieldError component uses these CSS classes (View source styles):

Base Classes [!toc]

  • .field-error - Base error styles with danger color
  • Only shows when the data-visible attribute is present
  • Text is truncated with ellipsis for long messages

API Reference

FieldError

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode | ((validation: ValidationResult) => ReactNode)-Error message content or render function

Accessibility

The FieldError component ensures accessibility by:

  • Using proper ARIA attributes for error announcement
  • Supporting screen readers with semantic HTML
  • Providing visual and programmatic error indication
  • Automatically managing visibility based on validation state
TextField

Composition-friendly text fields with labels, descriptions, and inline validation

Input

Primitive single-line text input component that accepts standard HTML attributes

TextArea

Primitive multiline text input component that accepts standard HTML attributes