Label input Variant

This is demo and docs for label input variant

Basic Input Variants without label

Input field without label

Please enter your name

Basic Input Variants with customize label

label input field with custom label title

Full Name *

Email *

Username

Username is required

Password

Must be at least 8 characters

Input with icons & password toggle

lLabel input variants with icons

Password

Email *

Password

Wrong password

Email *

Wrong email

Password

Must contains 8 letters.

Email *

Must be an email.

Password

Must contains 8 characters.

Email *

Must be an email.

Textarea / Comment variants

Label Input asChild feature to replicate textarea with same input feature and styles

Comment is requried.

Comment

Comment *

Comment is required.

LabelInput Component Documentation

The LabelInput component is a flexible, accessible, and fully featured input field built with React, TailwindCSS, and Radix Slot for wrapping other components.
It supports labels, helper text, error messages, icons, required fields, and can be controlled natively or with state.

Basic Usage

<LabelInput label="Username" placeholder="Enter your username" />

<LabelInput
  label="Email"
  helperText="We'll never share your email"
  placeholder="Enter your email"
/>

<LabelInput
  label="Password"
  error="Password is too short"
  placeholder="Enter password"
/>

Props

The LabelInput component accepts all native <input> props plus:

Prop	Type	Default	Description
label	string \| ReactNode	undefined	Text or node displayed above the input field.
helperText	string \| ReactNode	undefined	Small text displayed below the input for guidance.
error	string	undefined	Error message to display below the input. Overrides helperText.
asChild	boolean	false	Renders a `Slot` instead of a native input.
isRequired	boolean	false	Displays a * required label indicator.
leftIcon	ReactNode	undefined	Icon displayed inside input on the left.
rightIcon	ReactNode	undefined	Icon displayed inside input on the right.

Using `LabelInput` with React Hook Form

You can fully integrate LabelInput with React Hook Form using the register method and formState.errors. This allows validation, value tracking, and error messages to work seamlessly.

import { useForm, SubmitHandler } from "react-hook-form";
import { LabelInput } from "@/components/ui/label-input";

type FormValues = {
  username: string;
  email: string;
  password: string;
};

export default function LabelInputRHFExample() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    mode: "onBlur",
  });

  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log("Form submitted:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      {/* Username Input */}
      <LabelInput
        label="Username"
        placeholder="Enter your username"
        {...register("username", { required: "Username is required" })}
        error={errors.username?.message}
      />

      {/* Email Input */}
      <LabelInput
        label="Email"
        placeholder="Enter your email"
        {...register("email", {
          required: "Email is required",
          pattern: {
            value: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
            message: "Invalid email format",
          },
        })}
        error={errors.email?.message}
      />

      {/* Password Input */}
      <LabelInput
        label="Password"
        placeholder="Enter your password"
        type="password"
        {...register("password", {
          required: "Password is required",
          minLength: { value: 6, message: "Minimum 6 characters" },
        })}
        error={errors.password?.message}
      />

      <button
        type="submit"
        className="px-4 py-2 bg-primary text-white rounded-lg"
      >
        Submit
      </button>
    </form>
  );
}

How it works:

Registering Inputs Each line LabelInput uses {...register("fieldName", validationRules)} from RHF.
Accessing Errors The error prop of LabelInput is set to errors.fieldName?.message. This automatically displays the error message if validation fails.
Validation Rules You can define rules like required, minLength, pattern, or custom validators.
Form Submission handleSubmit collects validated values. You can use them in API calls or state updates.

Example with Default Values & Controlled RHF

const { register, setValue, getValues, formState: { errors } } = useForm<FormValues>({
  defaultValues: { username: "JohnDoe" }
});

// Access value dynamically
console.log(getValues("username"));

// Update value programmatically
setValue("username", "JaneDoe");

✅ Benefits of using LabelInput with RHF:

Validation and errors handled automatically.
Supports icons, helper text, and required indicators.
Works with both controlled and uncontrolled inputs.
Keeps your UI consistent across forms.

You can control the input using React state:

import { useState } from "react";

export default function ControlledInputExample() {
  const [value, setValue] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);

    // Example validation
    if (e.target.value.length < 3) {
      setError("Minimum 3 characters required");
    } else {
      setError("");
    }
  };

  return (
    <LabelInput
      label="Username"
      placeholder="Enter username"
      value={value}
      onChange={handleChange}
      error={error}
      isRequired
    />
  );
}

This allows the parent component to fully control the input value.
Errors can be dynamically displayed based on validation logic.

Using Icons

import { SearchIcon, EyeIcon } from "@/components/icons";

<LabelInput
  label="Search"
  placeholder="Search..."
  leftIcon={<SearchIcon />}
  rightIcon={<EyeIcon />}
/>

Using `asChild` for Custom Components

import Link from "next/link";

<LabelInput asChild>
  <Link href="/profile">Custom input wrapper</Link>
</LabelInput>

Useful for routing or wrapping custom input-like components.
Maintains all styling and variants.

Notes

Fully accessible with <label> and optional aria-required.
Supports helper text, error messages, and required field indicators.
Left and right icons are positioned automatically inside input.
Works both as controlled and uncontrolled input.
Fully compatible with Tailwind overrides via className.

Label input Variant

Basic Input Variants without label

Basic Input Variants with customize label

Input with icons & password toggle

Textarea / Comment variants

LabelInput Component Documentation

Basic Usage

Props

Using LabelInput with React Hook Form

How it works:

Example with Default Values & Controlled RHF

You can control the input using React state:

Using Icons

Using asChild for Custom Components

Notes

Using `LabelInput` with React Hook Form

Using `asChild` for Custom Components