Native input semantics with Minecraft text, border and caret.
Preview
Usage
Import Input from @/components/ui/input. The example uses value and onChange(event); use defaultValue for uncontrolled editing. It defaults to type="text", spellCheck={false} and autoCorrect="off", preserving explicit overrides.
Composition
Use a Label or aria-label on the real input. name, required, maxLength, readOnly, disabled and the imperative ref retain native input behavior. Group supporting text and validation with Field, or actions with Input Group.
API and accessibility
The default geometry is 200 by 20 logical pixels at scale 2. Border, glyphs, caret and selection use the painter and delivered font resources. Password/special input types, unsupported glyphs and RTL may use browser text rendering; native pixel coverage is limited to recorded glyphs and conditions.
See the underlying API for shared semantics.
Read only
Disabled
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Input as InputPrimitive } from "@base-ui/react/input";
import * as React from "react";
import { attachMinecraftInput } from "./minecraft-input-paint";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import "./minecraft-unifont-metrics.css";
import "./minecraft-input.css";
interface InputStyle extends React.CSSProperties {