Field

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/field.json

Usage

import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/matos-ui/field"

<Field invalid={Boolean(error)}>
  <FieldLabel htmlFor="email" required>Email</FieldLabel>
  <input id="email" aria-invalid={Boolean(error)} />
  <FieldDescription>Used for account notices.</FieldDescription>
  <FieldError error={error} />
</Field>

FieldError enters with a short fade and slide and sets role="alert". FieldMessage reserves a stable support line and swaps description, success, or error content without shifting neighboring grid fields.

Also exported: FieldSuccess, InputGroup, InputGroupAddon, InputGroupButton, and fieldVariants.