Input

Guidelines#

Use it for short text, emails, numbers and URLs. Pair every field with a Label whose htmlFor matches — the Max design audit counted 156 inputs labelled only by a placeholder; don't add to it.

What you provide: id, type, name, value or defaultValue, an example placeholder ("you@company.com"), and aria-describedby for help or error text.

States: focus = ring border + 3px ring halo at 50%. Invalid = aria-invalid: destructive border and a faint destructive halo, message below in text-destructive. Disabled = 50% opacity.

Text is 16px below md (iOS doesn't zoom) and 14px from md up. For API keys use SecretInput; for dates DateTimePicker; for phone numbers Max's PhoneInput (not in this bundle).

Note: input measures about 1.5:1 against the page — under the 3:1 guideline for control edges. The label carries the identification.

Facts#

Group	Forms
Product	Max
Global	window.DigitalCrew.Input
Source	max-agent: src/components/ui/input.tsx
Import in the app	import { Input } from "@/components/ui/input";

API#

TypeScript declarations emitted from src/components/ui/input.tsx (the module also exports its other parts).

declare function Input({ className, type, ...props }: React.ComponentProps<"input">): any;
export { Input };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Field(id, label, input, help, error) {
  return h("div", { className: "flex flex-col gap-2 w-72" },
    h(DC.Label, { htmlFor: id }, label), input,
    help ? h("p", { id: id + "-help", className: error ? "text-sm text-destructive" : "text-sm text-muted-foreground" }, help) : null);
}
function App() {
  return h("div", { className: "grid grid-cols-2 gap-x-8 gap-y-5" },
    Field("in-1", "Work email", h(DC.Input, { id: "in-1", type: "email", placeholder: "you@company.com" })),
    Field("in-2", "Company domain", h(DC.Input, { id: "in-2", defaultValue: "northwind.io" })),
    Field("in-3", "Daily sending limit", h(DC.Input, { id: "in-3", defaultValue: "500", "aria-invalid": true, "aria-describedby": "in-3-help" }), "A warming mailbox sends 50 a day at most.", true),
    Field("in-4", "Workspace ID", h(DC.Input, { id: "in-4", defaultValue: "ws_7f3a91c2", disabled: true }), "Set when the workspace was created."));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#