co-json-field

Editor de JSON u objeto arbitrario sobre un <textarea> con validación de parseo en línea. Es el renderer de los campos de esquema de tipo mixed. El value comprometido es el texto JSON crudo (string), que el formulario consumidor se encarga de parsear.

Demo

Ver código

<co-json-field label="Metadata" placeholder="{ }" rows="8" helper-text="Debe ser JSON válido"></co-json-field>

API

Props

Prop	Atributo	Tipo	Default	Descripción
disabled	disabled	boolean	false
helperText	helper-text	string | undefined	—	Helper text shown below the field.
invalidMessage	invalid-message	string	'Invalid JSON'	Message shown when the typed JSON cannot be parsed.
label	label	string | undefined	—
layout	layout	"horizontal" | "vertical"	'vertical'	Label layout: vertical (label above) or horizontal (label beside)
name	name	string | undefined	—
placeholder	placeholder	string	'{ }'
readonly	readonly	boolean	false
required	required	boolean	false
rows	rows	number	8
size	size	"lg" | "md" | "s" | "sm"	'md'	Field size (mirrors co-input paddings; mono font scales 12/13/13/14). Vertical extent still comes from `rows`.
status	status	"default" | "error" | "success" | "warning"	'default'	External validation status (e.g. from a form controller).
value	value	string	''	Committed JSON text.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
coBlur	void	✓	✓
coChange	string	✓	✓	Emitted with the committed text on blur.
coFocus	void	✓	✓
coInput	string	✓	✓	Emitted on every keystroke with the raw text.
coValidity	{ valid: boolean; message?: string | undefined; }	✓	✓	Emitted whenever the internal JSON parse status changes.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
::part(field)	The bordered textarea wrapper
::part(helper)	The helper/error text row
::part(input)	The native textarea
::part(label)	The field label
::part(wrapper)	Root container

CSS Custom Properties

Este componente no expone CSS custom properties.