A set of CSS class names for structuring accessible form layouts with react-hook-form.

formClasses

formClasses is a plain object containing predefined CSS class names for styling form elements. It is not a React component — it is a utility for applying consistent, semantic styling to form structure built with react-hook-form.

formClasses provides CSS class names only. Use it with elements like <div> and <p>, not as a component.

Object shape

const formClasses = {
  formDescription: "text-muted-foreground text-sm",
  formItem: "grid gap-2",
  formLabel: "data-[error=true]:text-destructive",
  formMessage: "text-destructive text-sm",
};

Class names reference

Prop

Type

Usage with react-hook-form

Basic form structure

import { formClasses } from '@loke/design-system/form';
import { useForm } from 'react-hook-form';
import { Input } from '@loke/design-system/input';

export function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div className={formClasses.formItem}>
        <label htmlFor="email" className={formClasses.formLabel}>
          Email
        </label>
        <Input
          id="email"
          placeholder="you@example.com"
          {...register('email', { required: 'Email is required' })}
        />
        {errors.email && (
          <p className={formClasses.formMessage}>
            {errors.email.message}
          </p>
        )}
      </div>

      <div className={formClasses.formItem}>
        <label htmlFor="password" className={formClasses.formLabel}>
          Password
        </label>
        <Input
          id="password"
          type="password"
          {...register('password', { required: 'Password is required' })}
        />
      </div>
    </form>
  );
}

With description text

<div className={formClasses.formItem}>
  <label htmlFor="newsletter" className={formClasses.formLabel}>
    Subscribe to newsletter
  </label>
  <input id="newsletter" type="checkbox" {...register('newsletter')} />
  <p className={formClasses.formDescription}>
    Receive updates about new features and improvements.
  </p>
</div>

Dynamic error state

<label
  htmlFor="username"
  className={formClasses.formLabel}
  data-error={!!errors.username}
>
  Username
</label>

The data-[error=true]:text-destructive selector automatically applies the destructive (red) color when data-error="true".

When to use formClasses

Use formClasses when:

Building custom form layouts with react-hook-form
You need consistent spacing and styling for form fields
You're not using the pre-styled <FormField>, <FormLabel>, <FormDescription>, and <FormMessage> components from the design system

For most use cases, the @loke/design-system/form export includes ready-to-use form components that internally apply formClasses for you.

Tailwind classes breakdown

formItem: grid gap-2 — Uses CSS Grid with a 2-unit gap between label, input, and messages
formLabel: data-[error=true]:text-destructive — Applies destructive color when the data-error attribute is true
formDescription: text-muted-foreground text-sm — Small, muted text for helper text
formMessage: text-destructive text-sm — Small, destructive (red) text for validation errors

Customization

You can override classes when needed:

import { cn } from '@loke/design-system/cn';
import { formClasses } from '@loke/design-system/form';

<div className={cn(formClasses.formItem, 'gap-4')}>
  {/* Custom spacing with gap-4 instead of gap-2 */}
</div>

Import

import { formClasses } from '@loke/design-system/form';

formClasses

On this page