MText Input

Forms

About

A single-line text input with a built-in clear button that appears once it has a value; ported to React from Millai Studio's Millai UI Vue component library.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MText Input to your project and fits it to your theme.

Code

How MText Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import MTextInput from "@/components/ui/mtext-input";

export default function MTextInputDemo() {
  const [email, setEmail] = React.useState("jane.doe@example.com");

  return (
    <div className="flex w-full max-w-sm flex-col gap-1.5">
      <label htmlFor="email" className="text-sm font-medium text-foreground">
        Email
      </label>
      <MTextInput
        id="email"
        type="email"
        autoComplete="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
      />
    </div>
  );
}