Controlsregistry/ui/input.tsx/r/input.json

Input

Accessible text input with linked monospace label, optional hint, and marker-flagged error alert.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Webhook signing secret

Prefix whsec_ required for production endpoints

Dark · Flashback.f12-theme-dark

Interactive preview

Webhook signing secret

Prefix whsec_ required for production endpoints

Install & copy-in source

shadcn CLI (input.json)

npx shadcn@latest add https://frame12.dev/r/input.json

Usage example (Input)

import { Input } from '@/components/frame12';

export function WebhookField() {
  return (
    <Input
      label="Webhook signing secret"
      hint="Rotated every 90 days across production endpoints"
      defaultValue="whsec_f12_99481a"
    />
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Automatically generates a stable ID via React.useId() when id is omitted.
Sets aria-invalid={Boolean(error)} and chains hintId/errorId into aria-describedby.

GrammarFRAME/12 rules

Design grammar

Uses a 2.5px solid --f-rule square border with zero border-radius.
Error flags use --f-marker background under bold --f-marker-ink text.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/input.tsx)
Prop	Type	Default	Description
`label`	`string`	`required`	Visible label text programmatically linked to the <input> via htmlFor/id.
`hint`	`string`	`undefined`	Optional helper text linked via aria-describedby.
`error`	`string`	`undefined`	Validation error message rendered in a role="alert" live region with a marker flag.