/// Inputs

JsonInput

A mono Textarea that validates JSON on blur, surfaces the parse error in danger tone, and can pretty-print the value.

import { JsonInput } from "@protocore/pds";

View as Markdown

Basics

Type JSON and blur the field: valid input clears, invalid input shows the parser's message and marks the field invalid. Controllable via value / onValueChange.

Format button

Set withFormatButton to add a Format action that pretty-prints valid JSON on demand; formatOnBlur does the same automatically when the field loses focus.

When to use it

Use JsonInput where a user authors raw JSON — a webhook payload, a config blob, a metadata field — and needs immediate feedback that it parses. To only display JSON, use JsonViewer or a CodeBlock. This control validates syntax, not shape: pair it with a schema check on submit for structural validation.

Usage

Give it an `aria-label` (or wrap it in a `Field`).
Use `onValidationChange` to disable submit while the JSON is invalid.
Offer `withFormatButton` for anything a human hand-edits.

Don't

Don't treat a valid parse as a valid document — check the shape separately.
Don't reformat on every keystroke; format on blur or on demand.
Don't hide the error — it names exactly where parsing failed.

Accessibility

The parse error renders in a `role="alert"` region and is referenced by the field's `aria-describedby`.
The field carries `aria-invalid` while the value fails to parse.
Spellcheck and autocomplete are disabled — this is code, not prose.

`JsonInput` props

Prop	Type	Default	Description
`autoResize`	`boolean`	—	Grow to fit content instead of scrolling.
`className`	`string`	—
`defaultValue`	`string`	—	Initial text when uncontrolled.
`formatOnBlur`	`boolean`	`false`	Pretty-print the value on blur when it parses. Default `false`.
`indent`	`number`	`2`	Indentation width for formatting. Default `2`.
`onValidationChange`	`((error: string \| null) => void)`	—	Called when validity changes: the parse-error message, or `null` when valid/empty.
`onValueChange`	`((value: string) => void)`	—	Fires with the raw text on every keystroke.
`size`	`enum`	`md`	Control padding scale. Default `md`.
`style`	`CSSProperties`	—
`value`	`string`	—	Controlled text value. Pair with `onValueChange`.
`withFormatButton`	`boolean`	`false`	Render a "Format" button that pretty-prints on demand. Default `false`.