Vibes logo

FieldError

The FieldError component is used to display error messages for form fields.

Installation

Install the following dependencies

npm install clsx lucide-react

Copy and paste the following code into your project

form/field-error/index.tsx

import { clsx } from 'clsx';import { CircleAlert } from 'lucide-react';/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css *  :root { *    --field-error: hsl(var(--error)); *  } * ``` */export function FieldError({  className,  children,  ...rest}: React.ComponentPropsWithoutRef<'div'>) {  return (    <div      {...rest}      className={clsx(        'flex items-center gap-1 text-xs text-[var(--field-error,hsl(var(--error)))]',        className,      )}    >      <CircleAlert size={20} strokeWidth={1.5} />      {children}    </div>  );}

Usage

import { FieldError } from '@/vibes/soul/form/field-error';function Usage() {  return (      <FieldError>You must accept the Terms & Conditions</FieldError>  );}

API Reference

FieldErrorProps

PropTypeDefault
children*
ReactNode

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --field-error: hsl(var(--error));}