UrlEditor

Edits a url field as a web link. Uploads are not in scope.

Install

ReactSvelte

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

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

UrlEditor: a web link, an unset field, and a local path it will not edit

ReactSvelte

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

React

Loading the React demo…

Svelte

Loading the Svelte demo…

Input

typed	emitted
an address and a name	{ url, name }
an address, no name	{ url }; the field reads back the address as its name
both empty	null
an address holding a raw space	nothing; percent-encode it
a name and no address	nothing

Props

prop	type	default	meaning
value	UrlValue | null	null	The stored object. Two-way in Svelte.
onValueChange	(value: UrlWriteValue | null) => void	—	Called when either input commits.
field	Pick<FieldSchema, 'displayName' | 'mandatory'> | null	null	Supplies the accessible label and the required flag.
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	an example address	Placeholder of the address input.
namePlaceholder	string	'Name'	Placeholder of the name input.
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.

A value whose link type is local carries paths and no address. The control shows a line saying so and takes no input.

Events

onValueChange fires on commit only. Input that does not parse emits nothing.

Slots

errorMessage receives the message and renders it.

Keyboard

key	does
Enter	Commits both inputs.
Escape	Restores the stored value.
Tab	Moves between address and name.
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

The only accepted write is an object holding url. A bare string is a 400, and so is {} and an object carrying only a type and an id (field_types/url).

The address itself is validated. A raw space is the one character measured to fail; the same address with the space percent-encoded is accepted (field_types/url).

Each accepted write mints a new Attachment row and the value reads back as link_type: web. Only null clears the field, and each derived field has to be cleared by name (field_types/url).