Input
Freev1.0.0The shadcn Input, plus a full field with label, counter, hint and error states.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { Input, InputField } from "@/components/ui/notchset/input";
export function InputExample() {
return (
<>
<InputField
label="Agent name"
prefix="@"
maxLength={32}
helper="Shown in runs and traces"
validate={(v) => (/^[a-z0-9-]+$/.test(v) ? null : "Lowercase, 0–9 and - only")}
preview={(v) => `/agents/${v}`}
/>
<Input placeholder="run_8f3a1c92" />
</>
);
}Props
Input–as shadcnThe bare input: className, type and every native prop.
InputField label–ReactNodeThe label (a real <label>).
value / defaultValue / onValueChange–string / (value) => voidThe value.
prefix–ReactNodeA fixed prefix before the value ("@").
maxLength–numberAlso shows the counter ("08/32").
validate–(value) => string | nullAn error to show, checked on every change; sets aria-invalid.
Show all 9 propsShow fewer
preview–(value) => stringA live reading of a valid value.
helper–stringThe helper while empty, or the reason while disabled.
clearable–booleanThe clear key. Default true; Esc also clears.
Anatomy
- Same exports as shadcn's Input, plus InputField.
- Base UI and Radix builds: your components.json picks one.
- The Notchset instrument parts: node and glyph flip.
Inputdata-slot="input"The input.
InputFielddata-slot="input-field"The instrument's box: prefix, input, clear key and trace.
Helperdata-slot="input-helper"The live helper line.
Source
components/ui/notchset/input.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/input.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/input.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/input.tsx
- lib/beautiful-ui/notchset/field.tsx
- lib/beautiful-ui/notchset/field-classes.ts
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Any single-line value
- A drop-in for shadcn's Input (same exports, className on the input)
- InputField when the field needs its label, counter, validation and a live preview
Use something else when
- Several lines: use Textarea
- A choice from a list: use Select
Mistakes to avoid
- Put validation in validate, not onChange, so the field shows and announces it
- Install the Notchset theme for the exact colours
Agents find it by
- input, text field, form field, validation, agent name, slug, shadcn input, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/input.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Esc
- Clear a non-empty value (InputField)
Accessibility
- A real <label> for InputField; the helper is aria-describedby and aria-live
- Invalid sets aria-invalid and the error is announced
- The clear key is out of the tab order (Esc clears from the keyboard)
- The helper wraps; it never truncates
Motion
- Focus
- The border turns ink and a 2px trace draws from the left in 300ms cubic-bezier(.7,0,.25,1); it retracts in 200ms
- Helper
- Changes flip in, glyph by glyph
- Clear key
- Scales in from .6 over 220ms
Responsive
- Fills its container; the prefix and clear key keep their size.
- 44px tall on touch screens.
Performance
- A native input; the underline and character count are CSS and React state on change.
- No measuring or observers.
Changelog
v1.0.0 · 2026-10-02
First release
