ui/components/input

Input

Terminal-styled text input primitives with size variants, invalid state, and optional prefix/suffix grouping.

Sizes sm and md are desktop densities (28/36px tall; the tap target spans the full row width and meets WCAG 2.5.8 AA). On coarse-pointer/mobile-first forms prefer size="lg" (44px).

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Input } from "@/components/ui/input";3 4 export default function InputDefault() {5   return (6     <Field>7       <Field.Label>Label</Field.Label>8       <Field.Control>9         <Input placeholder="Enter text..." />10       </Field.Control>11     </Field>12   );13 }14

Installation

$pnpm exec dgadd add ui/input

[Installs to]src/components/ui/input[Item]ui/input

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Field } from "@/components/ui/field";2 import { Input } from "@/components/ui/input";3 4 export default function InputDefault() {5   return (6     <Field>7       <Field.Label>Label</Field.Label>8       <Field.Control>9         <Input placeholder="Enter text..." />10       </Field.Control>11     </Field>12   );13 }14

Examples

Group

Preview

tsx

1 import { InputGroup } from "@/components/ui/input";2 3 export default function InputGroupExample() {4   return (5     <InputGroup6       aria-label="Config path"7       prefix="~/"8       suffix=".json"9       defaultValue="diffgazer/config"10       placeholder="path/to/config"11     />12   );13 }14

Variants

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Input } from "@/components/ui/input";3 4 export default function InputVariants() {5   return (6     <div className="flex flex-col gap-4 max-w-sm">7       <Field>8         <Field.Label>Small</Field.Label>9         <Field.Control>10           <Input size="sm" placeholder="Small input" />11         </Field.Control>12       </Field>13       <Field>14         <Field.Label>Medium (default)</Field.Label>15         <Field.Control>16           <Input size="md" placeholder="Medium input (default)" />17         </Field.Control>18       </Field>19       <Field>20         <Field.Label>Large</Field.Label>21         <Field.Control>22           <Input size="lg" placeholder="Large input" />23         </Field.Control>24       </Field>25       <Field invalid>26         <Field.Label>Error state</Field.Label>27         <Field.Control>28           <Input placeholder="Error state" />29         </Field.Control>30       </Field>31       <Field disabled>32         <Field.Label>Disabled</Field.Label>33         <Field.Control>34           <Input placeholder="Disabled input" />35         </Field.Control>36       </Field>37       <Field>38         <Field.Label>Read-only</Field.Label>39         <Field.Control>40           <Input readOnly defaultValue="~/projects/diffgazer" />41         </Field.Control>42       </Field>43     </div>44   );45 }46

Focus

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Input, InputGroup } from "@/components/ui/input";3 4 // The focus classes are applied statically so the treatment stays visible in a5 // screenshot. In real usage `focus:` / `focus-within:` apply them for you.6 const FOCUS_RING = "border-ring ring-1 ring-ring";7 8 export default function InputFocus() {9   return (10     <div className="flex max-w-sm flex-col gap-4">11       <Field>12         <Field.Label>Resting</Field.Label>13         <Field.Control>14           <Input placeholder="Not focused" />15         </Field.Control>16       </Field>17       <Field>18         <Field.Label>Focused</Field.Label>19         <Field.Control>20           <Input className={FOCUS_RING} placeholder="Focused" />21         </Field.Control>22       </Field>23       <Field>24         <Field.Label>Focused group</Field.Label>25         <Field.Control>26           <InputGroup className={FOCUS_RING} prefix="~/" suffix=".json" defaultValue="diffgazer" />27         </Field.Control>28       </Field>29     </div>30   );31 }32

Form

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Field } from "@/components/ui/field";5 import { Input } from "@/components/ui/input";6 import { Textarea } from "@/components/ui/textarea";7 8 export default function InputForm() {9   const [name, setName] = useState("");10   const [email, setEmail] = useState("");11   return (12     <div className="flex flex-col gap-4 max-w-sm">13       <Field>14         <Field.Label>Name</Field.Label>15         <Field.Control>16           <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />17         </Field.Control>18       </Field>19       <Field>20         <Field.Label>Email</Field.Label>21         <Field.Control>22           <Input23             type="email"24             value={email}25             onChange={(e) => setEmail(e.target.value)}26             placeholder="you@example.com"27           />28         </Field.Control>29       </Field>30       <Field>31         <Field.Label>Message</Field.Label>32         <Field.Control>33           <Textarea placeholder="Tell us more..." />34         </Field.Control>35       </Field>36     </div>37   );38 }39

API Reference

Input

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height/padding/font size token.
aria-invalid	boolean \| "true" \| "false" \| "grammar" \| "spelling"	—	The native ARIA invalid state. The error border applies to true/"true"; the error ring joins on focus. Field.Control sets this automatically when Field.invalid is true.

InputGroup

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Height/padding/font size token applied to the wrapper and the inner input.
prefix	ReactNode	—	Decorative content rendered before the input. Plain text is aria-hidden; interactive affixes must provide their own accessible labels.
suffix	ReactNode	—	Decorative content rendered after the input. Plain text is aria-hidden; interactive affixes must provide their own accessible labels.
prefixAriaHidden	boolean	true for string/number prefixes; false otherwise	Hide the prefix from assistive tech. Controls whether the prefix wrapper is hidden from assistive technology and overrides the content-based default.
suffixAriaHidden	boolean	true for string/number suffixes; false otherwise	Hide the suffix from assistive tech. Controls whether the suffix wrapper is hidden from assistive technology and overrides the content-based default.
inputClassName	string	—	className applied to the inner input element. The outer className targets the wrapper.

Accessibility

Notes

Read-only vs Disabled

Input styles the two states on different channels so they cannot be confused. Disabled dashes the border and dims the ink: the field is not part of this form. Read-only fills the surface with the recessed token and keeps full-contrast ink: the value matters, it just cannot be edited. A read-only field stays focusable and copyable, and the focus ring still applies on top of the fill because one is an edge and the other a surface.

Invalid State

Set aria-invalid=true on Input or InputGroup to apply the error border. The error ring joins on focus, so focus stays the strongest edge a field shows. Field.Control sets aria-invalid automatically when Field.invalid is true.

InputGroup

Use InputGroup for prefix and suffix content around a text input. Plain text and number affixes are decorative by default; set prefixAriaHidden or suffixAriaHidden to false when that text contributes meaning. Non-text affixes remain exposed by default and can be hidden explicitly. Interactive affixes must remain exposed and provide their own accessible labels. Use Field when you need label, description, and error wiring.

Source

Install via CLI: pnpm exec dgadd add ui/input.

Highlighted source loads after this disclosure opens. Browse the source repository.

Input

Installation

Usage

Examples

Group

Variants

Focus

Form

API Reference

Input

InputGroup

Accessibility

Notes

Read-only vs Disabled

Invalid State

InputGroup

Source

View component source (10 files)