You are reading the v1 docs. v2 renamed several props and replaced GeckoUIPortal with GeckoUIProvider. Read this page in v2.

Live examples are only rendered in the v2 docs.

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

<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

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

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

  return (
    <div className="space-y-1">
      <Input type="email" placeholder="[email protected]" />
      {error && <InputError>{error}</InputError>}
    </div>
  );
}

Form Validation

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

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

Multiple Error Types

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

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

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

With Label

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