Input

Used for workspace notifications.

"use client";

import { useState } from "react";

import { InputField } from "@/components/matos-ui/input";

export function InputDemo() {
  const [email, setEmail] = useState("hello@studio.com");
  const error =
    email.length > 0 && !email.includes("@")
      ? "Enter a valid email address."
      : undefined;

  return (
    <div className="mx-auto w-full max-w-sm">
      <InputField
        type="email"
        label="Email"
        placeholder="hello@studio.com"
        description="Used for workspace notifications."
        error={error}
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/input.json

Usage

import { InputField } from "@/components/matos-ui/input"

<InputField
  label="Email"
  required
  placeholder="you@company.com"
  error={errors.email?.message}
  {...register("email")}
/>

Input is the primitive control. InputField composes label, description, status icon, and animated feedback, reserving message space by default so validation does not move adjacent fields. Pass reserveMessageSpace={false} for layouts that do not need that reservation.