TextEditor

Edits a text field and emits the string the API stores.

Install

ReactSvelte

pnpm dlx shadcn@latest add https://sg-widgets.vercel.app/r/react/text-editor.json

pnpm dlx shadcn-svelte@latest add https://sg-widgets.vercel.app/r/svelte/text-editor.json

TextEditor: single line, multi-line, and the three blocked states

ReactSvelte

Reduce motionRadius: themeRadius: noneRadius: smRadius: mdRadius: lgRadius: xl

React

Loading the React demo…

Svelte

Loading the Svelte demo…

Input

typed	emitted
plate delivered	"plate delivered"
padded	"padded"
empty, or spaces only	null
line1 newline line2	"line1\nline2"

Props

prop	type	default	meaning
value	string | null	null	The stored string. Two-way in Svelte.
onValueChange	(value: string | null) => void	—	Called when the input commits.
field	Pick<FieldSchema, 'displayName' | 'mandatory'> | null	null	Supplies the accessible label and the required flag.
multiline	boolean	false	Renders a textarea.
rows	number	3	Rows of the textarea.
disabled	boolean	false
readonly	boolean	false
invalid	boolean	false	Forced invalid state.
error	string | null	null	A message from the caller, shown in place of the parse error.
onErrorChange	(error: string | null) => void	—	Called when the parse error appears or clears.
placeholder	string	—
class / className	string	—	Merged after the widget's own classes.
errorMessagefrom ValueEditor	(message: string) => ReactNode / Snippet<[string]>	—	Renders the message. Default is a small destructive line under the control.
sizefrom ValueEditor	'sm' | 'md' | 'lg'	'md'	Control height.

Events

onValueChange fires on commit only, never on a keystroke. onErrorChange reports the parse error.

Slots

errorMessage receives the message and renders it. Without it the message is a small line under the control.

Keyboard

key	does
Enter	Commits, on a single-line input.
Escape	Restores the stored value.
Tab	Commits by leaving the control.
Enterfrom ValueEditor	Commits the draft. In a textarea it adds a line, and commitOnEnter turns the commit off.
Escapefrom ValueEditor	Restores the stored value and drops what the last parse said.
Tabfrom ValueEditor	Leaves the control, which commits.

API behaviour

Both ends of the value are stripped on write, and an empty string is stored as null, so there is no “set but blank” state to round-trip. A non-string is a 400 (field_types/text).