InputError

A component for displaying error messages below input fields. This is a simple styled div, typically used to show validation errors or other feedback related to form inputs.

Installation

import { InputError } from '@geckoui/geckoui';

Basic Usage

This field is required

<InputError>This field is required</InputError>

Props API

Prop	Type	Default	Description
`children`	`ReactNode`	-	Error message content
`className`	`string`	-	CSS class for custom styling
...rest	`HTMLAttributes<HTMLDivElement>`	-	All standard div attributes

Examples

With Input Field

Please enter a valid email address

import { Input, InputError } from '@geckoui/geckoui';

function EmailField() {
  const [error, setError] = useState('');

  return (
    <div className="space-y-1">
      <Input type="email" placeholder="email@example.com" />
      {error && <InputError>{error}</InputError>}
    </div>
  );
}

Form Validation

Username must be at least 3 characters

Password must contain at least one number

function FormWithValidation() {
  const [errors, setErrors] = useState({});

  return (
    <form>
      <div className="space-y-1">
        <Input type="text" placeholder="Username" />
        {errors.username && (
          <InputError>{errors.username}</InputError>
        )}
      </div>

      <div className="space-y-1">
        <Input type="password" placeholder="Password" />
        {errors.password && (
          <InputError>{errors.password}</InputError>
        )}
      </div>
    </form>
  );
}

Conditional Display

Email is required

function ConditionalError({ error }) {
  return (
    <div className="space-y-1">
      <Input type="email" />
      {error && <InputError>{error}</InputError>}
    </div>
  );
}

Multiple Error Types

Password must be at least 8 characters and contain at least one uppercase letter, one lowercase letter, and one number

function PasswordField({ errors }) {
  const getErrorMessage = () => {
    if (errors.required) return 'Password is required';
    if (errors.minLength) return 'Password must be at least 8 characters';
    if (errors.pattern) return 'Password must contain letters and numbers';
    return '';
  };

  const errorMessage = getErrorMessage();

  return (
    <div className="space-y-1">
      <Input type="password" />
      {errorMessage && <InputError>{errorMessage}</InputError>}
    </div>
  );
}

Custom Styling

Default error styling

Custom styled error

Warning style error

<InputError className="text-red-600 font-semibold">
  Custom styled error
</InputError>

<InputError className="text-orange-500 italic">
  Warning style error
</InputError>

With Label

Email Address *

This field is required

import { Label, Input, InputError } from '@geckoui/geckoui';

<div className="space-y-1">
  <Label htmlFor="email" required>Email Address</Label>
  <Input id="email" type="email" />
  {error && <InputError>{error}</InputError>}
</div>

Accessibility

Uses semantic HTML (<div> element)
Should be associated with form field via ARIA
Error styling provides visual feedback
Works with screen readers

Styling

The component uses the class name GeckoUIInputError. Override styles using the className prop:

.GeckoUIInputError {
  /* Default error styling */
}

Label - Form field labels
Input - Text input fields
Alert - Page-level messages
RHFInput - React Hook Form input integration

InputError

On this page