Input

RUN ID

AUTO-GENERATED · READ ONLY

THRESHOLD

MUST BE BETWEEN 0 AND 100

Source

"use client"

import { Input } from "@/registry/warren/input/input"
import { Field } from "@/registry/warren/field/field"

export default function InputDemo() {
  return (
    <div className="w-full max-w-sm border-2 border-border bg-panel p-4">
      <Field label="RUN ID" htmlFor="run-id" hint="AUTO-GENERATED · READ ONLY">
        <Input id="run-id" defaultValue="RUN-2026-08-20-0042" disabled />
      </Field>
      <Field
        label="THRESHOLD"
        htmlFor="threshold"
        required
        error="MUST BE BETWEEN 0 AND 100"
        className="mt-3"
      >
        <Input id="threshold" placeholder="0.85" aria-invalid />
      </Field>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/input.json

Usage

import { Input } from "@/components/ui/input"

<Input placeholder="E.G. 0427-DELTA" />

Sizes

sm · md · lg

Source

"use client"

import { Input } from "@/registry/warren/input/input"

export default function InputSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Input size="sm" placeholder="SM · 28PX ROW" />
      <Input size="md" placeholder="MD · 32PX ROW" />
      <Input size="lg" placeholder="LG · 40PX ROW" />
    </div>
  )
}

States

disabled dims the field, and aria-invalid swaps the border to the danger tone. Pair aria-invalid with a Field error message for the full validation treatment.

Case

Values render uppercase by default (caps, default true) for the Warren Control look. Set caps={false} when case matters — emails, codes, IDs — so the display matches the submitted value:

<Input caps={false} placeholder="user@domain.com" />

API Reference

Prop

Type