schema-components 2.0.1 → 2.1.0

package/src/svelte/contexts.ts

@@ -0,0 +1,79 @@
+/**
+ * Svelte 5 implementation of `core/contexts.ts`'s {@link ContextPort}
+ * for the resolver and widget registry.
+ *
+ * Wires the abstract provide / consume port to Svelte's native
+ * `setContext()` / `getContext()` primitives (re-exported from
+ * `svelte`). Each port is keyed by a `Symbol` so multiple framework
+ * adapters can coexist in the same module graph without aliasing —
+ * Svelte's context keys are object-identity-compared.
+ *
+ * Unlike the React `<Provider>` wrapper, Svelte's context model is
+ * "set on the current component instance, read from any descendant" —
+ * the {@link ContextPort.provide} call therefore does not wrap
+ * `children`. Instead, it sets the value on the component currently
+ * being initialised; descendants call {@link ContextPort.consume} to
+ * read it. The `children` argument is accepted purely to satisfy the
+ * port contract; it is returned unchanged so callers that pass a
+ * snippet or other ad-hoc representation can still receive their
+ * input back.
+ *
+ * @group Framework Adapters
+ */
+
+import { setContext, getContext } from "svelte";
+import type { ContextPort } from "../core/contexts.ts";
+import type { SvelteComponentResolver, SvelteWidgetMap } from "./types.ts";
+
+/**
+ * Symbol key for the resolver context. Identity-compared by Svelte's
+ * context API — never aliases against the widget context or any other
+ * port.
+ */
+const RESOLVER_CONTEXT_KEY = Symbol("schema-components/svelte:resolver");
+
+/**
+ * Symbol key for the widgets context. Sibling to
+ * {@link RESOLVER_CONTEXT_KEY}.
+ */
+const WIDGETS_CONTEXT_KEY = Symbol("schema-components/svelte:widgets");
+
+/**
+ * Context port for the active {@link SvelteComponentResolver}.
+ *
+ * The {@link ContextPort.consume} side returns `undefined` when no
+ * resolver has been provided in the current component subtree — the
+ * Svelte dispatcher then falls through to the headless resolver,
+ * matching the React adapter's behaviour with its
+ * `UserResolverContext` default value.
+ */
+export const resolverContext: ContextPort<SvelteComponentResolver | undefined> =
+    {
+        provide(value, children) {
+            setContext(RESOLVER_CONTEXT_KEY, value);
+            return children;
+        },
+        consume() {
+            return getContext<SvelteComponentResolver | undefined>(
+                RESOLVER_CONTEXT_KEY
+            );
+        },
+    };
+
+/**
+ * Context port for the active {@link SvelteWidgetMap}.
+ *
+ * The {@link ContextPort.consume} side returns `undefined` when no
+ * widget map has been provided — the dispatcher then falls through to
+ * the per-instance and global widget registries before consulting the
+ * resolver chain.
+ */
+export const widgetsContext: ContextPort<SvelteWidgetMap | undefined> = {
+    provide(value, children) {
+        setContext(WIDGETS_CONTEXT_KEY, value);
+        return children;
+    },
+    consume() {
+        return getContext<SvelteWidgetMap | undefined>(WIDGETS_CONTEXT_KEY);
+    },
+};

package/src/svelte/dispatch.ts

@@ -0,0 +1,267 @@
+/**
+ * Svelte-flavoured wrappers around `core/renderField.ts`'s
+ * framework-agnostic dispatcher.
+ *
+ * The dispatcher is the same one used by the React adapter — see
+ * `core/renderField.ts`. This module supplies the Svelte-specific
+ * {@link "../core/renderField.ts".DispatchConfig | DispatchConfig}:
+ * the `buildProps` factory, the `lookupRenderFn` against a
+ * {@link SvelteComponentResolver}, the per-step result coercion,
+ * and the recursion-cap sentinel.
+ *
+ * Centralising the wiring lets both `SchemaComponent.svelte` and
+ * `SchemaView.svelte` plug into the dispatcher without duplicating
+ * the closures, and keeps the dispatch order (depth cap → widget →
+ * resolver → fallback) identical across editable and read-only call
+ * sites.
+ */
+
+import {
+    buildRenderProps,
+    RESOLVER_KEYS,
+    type RenderProps,
+} from "../core/renderer.ts";
+import { dispatchRenderField } from "../core/renderField.ts";
+import { SchemaRenderError } from "../core/errors.ts";
+import type { WalkedField } from "../core/types.ts";
+import { headlessSvelteResolver } from "./headless.ts";
+import { lookupGlobalWidget } from "./widget.ts";
+import type {
+    SvelteComponentConstructor,
+    SvelteComponentResolver,
+    SvelteRenderDescriptor,
+    SvelteRenderProps,
+    SvelteWidgetMap,
+} from "./types.ts";
+
+/**
+ * Merge a user-supplied {@link SvelteComponentResolver} on top of
+ * the headless resolver. Mirrors `core/renderer.ts`'s
+ * `mergeResolvers` for the Svelte-flavoured resolver shape — user
+ * values win, fallback fills gaps.
+ *
+ * Implemented directly rather than delegating to the generic
+ * `mergeResolvers` because the latter is typed against
+ * `ComponentResolver` — the React-flavoured resolver whose values
+ * are typed `RenderFunction\<unknown, RenderProps\>`. The per-key
+ * behaviour is identical: each
+ * {@link RESOLVER_KEYS} entry is taken from `user` if defined,
+ * otherwise from `fallback`. The single source of truth on which
+ * keys exist is {@link RESOLVER_KEYS}, so adding a new
+ * `WalkedField` variant in `core/types.ts` automatically threads
+ * through the Svelte merge.
+ */
+export function mergeSvelteResolvers(
+    user: SvelteComponentResolver,
+    fallback: SvelteComponentResolver
+): SvelteComponentResolver {
+    const merged: SvelteComponentResolver = {};
+    for (const key of RESOLVER_KEYS) {
+        const fn = user[key] ?? fallback[key];
+        if (fn !== undefined) {
+            merged[key] = fn;
+        }
+    }
+    return merged;
+}
+
+/**
+ * Dispatch a single field through the Svelte dispatch chain.
+ *
+ * Looks up the matching {@link SvelteRenderFunction} in the supplied
+ * resolver (with the headless resolver as fallback), invokes it with
+ * the per-field props, and returns the resulting
+ * {@link SvelteRenderDescriptor} for the parent renderer to mount.
+ *
+ * Widget overrides (`.meta({ component: name })`) are resolved
+ * against the supplied instance → context → global chain before the
+ * resolver. The dispatch order matches the React adapter exactly:
+ *
+ *   1. Depth cap (`MAX_RENDER_DEPTH`) — returns the recursion
+ *      sentinel descriptor.
+ *   2. Widget override — instance map → context map → global
+ *      registry.
+ *   3. Resolver render function for `tree.type`.
+ *   4. Fallback — emits an em-dash / stringified-value descriptor.
+ */
+export function renderFieldSvelte(
+    tree: WalkedField,
+    value: unknown,
+    onChange: (v: unknown) => void,
+    userResolver: SvelteComponentResolver | undefined,
+    renderChild: SvelteRenderProps["renderChild"],
+    path: string,
+    instanceWidgets: SvelteWidgetMap | undefined,
+    contextWidgets: SvelteWidgetMap | undefined,
+    depth: number,
+    fallbackComponent: SvelteComponentConstructor,
+    sentinelComponent: SvelteComponentConstructor
+): SvelteRenderDescriptor | null {
+    if (path.length === 0) {
+        throw new Error(
+            "renderFieldSvelte requires a non-empty path. Pass the root " +
+                "path for the root field and use renderChild's pathSuffix " +
+                "to derive child paths."
+        );
+    }
+
+    const resolver: SvelteComponentResolver =
+        userResolver !== undefined
+            ? mergeSvelteResolvers(userResolver, headlessSvelteResolver)
+            : headlessSvelteResolver;
+
+    return dispatchRenderField<
+        SvelteRenderProps,
+        SvelteRenderDescriptor | null,
+        SvelteComponentResolver
+    >({
+        tree,
+        value,
+        path,
+        depth,
+        resolver,
+        config: {
+            buildProps: (fieldTree, fieldPath) => {
+                // The React-flavoured `buildRenderProps` returns
+                // `RenderProps`. Svelte's `SvelteRenderProps` shares
+                // every field except the `renderChild` return type
+                // (which is `SvelteRenderDescriptor | null` here vs.
+                // `unknown` for React). Adapt by re-wrapping the
+                // child render function we hold to satisfy the
+                // structural shape `buildRenderProps` expects, then
+                // re-cast on output. The cast is contained to this
+                // one boundary; no runtime reshaping required.
+                const reactShapedChild: RenderProps["renderChild"] = (
+                    childTree,
+                    childValue,
+                    childOnChange,
+                    pathSuffix
+                ) =>
+                    renderChild(
+                        childTree,
+                        childValue,
+                        childOnChange,
+                        pathSuffix
+                    );
+                const reactProps = buildRenderProps(
+                    fieldTree,
+                    value,
+                    onChange,
+                    reactShapedChild,
+                    fieldPath
+                );
+                // Re-shape onto SvelteRenderProps. The structural
+                // overlap with `RenderProps` is total apart from the
+                // `renderChild` return type; we substitute the
+                // Svelte-shaped function so consumers receive the
+                // proper output narrowing.
+                const svelteProps: SvelteRenderProps = {
+                    ...reactProps,
+                    renderChild,
+                };
+                return svelteProps;
+            },
+            lookupRenderFn: (type, mergedResolver) => mergedResolver[type],
+            ...(instanceWidgets !== undefined || contextWidgets !== undefined
+                ? {
+                      lookupWidget: (name: string) =>
+                          instanceWidgets?.get(name) ??
+                          contextWidgets?.get(name) ??
+                          lookupGlobalWidget(name),
+                  }
+                : {
+                      lookupWidget: (name: string) => lookupGlobalWidget(name),
+                  }),
+            recursionSentinel: (fieldTree) => ({
+                component: sentinelComponent,
+                props: buildSentinelProps(
+                    fieldTree,
+                    value,
+                    onChange,
+                    path,
+                    renderChild
+                ),
+            }),
+            fallback: (fieldTree, fieldValue) => ({
+                component: fallbackComponent,
+                props: buildSentinelProps(
+                    fieldTree,
+                    fieldValue,
+                    onChange,
+                    path,
+                    renderChild
+                ),
+            }),
+            coerceResult: (result, step) => {
+                // Widget step — undefined / null falls through to
+                // the resolver. Anything else is treated as a
+                // descriptor (or null short-circuit).
+                if (step === "widget") {
+                    if (result === undefined || result === null)
+                        return undefined;
+                    if (isDescriptor(result)) return result;
+                    return undefined;
+                }
+                // Resolver step — undefined falls through to the
+                // fallback; null short-circuits with "render
+                // nothing" (matches React's empty-array suppression
+                // path).
+                if (result === undefined) return undefined;
+                if (result === null) return null;
+                if (isDescriptor(result)) return result;
+                return undefined;
+            },
+            wrapRenderError: (err, fieldTree, fieldPath) =>
+                new SchemaRenderError(
+                    err instanceof Error
+                        ? err.message
+                        : `Render function threw for type "${fieldTree.type}" at "${fieldPath}"`,
+                    fieldTree,
+                    fieldTree.type,
+                    err
+                ),
+        },
+    });
+}
+
+/**
+ * Build the per-field props passed to the recursion-sentinel /
+ * fallback Svelte components. Both stages need the full
+ * {@link SvelteRenderProps} shape (so the component can read
+ * `value`, `meta`, etc.) so the helper centralises the construction.
+ */
+function buildSentinelProps(
+    tree: WalkedField,
+    value: unknown,
+    onChange: (v: unknown) => void,
+    path: string,
+    renderChild: SvelteRenderProps["renderChild"]
+): SvelteRenderProps {
+    return {
+        value,
+        readOnly: tree.editability === "presentation",
+        writeOnly: tree.editability === "input",
+        meta: tree.meta,
+        constraints: tree.constraints,
+        path,
+        tree,
+        onChange,
+        renderChild,
+        ...(tree.examples !== undefined ? { examples: tree.examples } : {}),
+    };
+}
+
+/**
+ * Type guard narrowing an unknown widget / resolver return value to
+ * a {@link SvelteRenderDescriptor}. The shape check is structural:
+ * any object with a callable `component` and a `props` field passes.
+ *
+ * Strict enough that an accidentally-returned `ReactNode` or HTML
+ * string is rejected before the dispatcher hands it to `<Mount>`.
+ */
+function isDescriptor(value: unknown): value is SvelteRenderDescriptor {
+    if (typeof value !== "object" || value === null) return false;
+    if (!("component" in value)) return false;
+    if (!("props" in value)) return false;
+    return typeof value.component === "function";
+}

package/src/svelte/headless.ts

@@ -0,0 +1,73 @@
+/**
+ * Svelte 5 headless renderer — the default
+ * {@link SvelteComponentResolver} implementation.
+ *
+ * Produces plain HTML elements (through one `.svelte` component per
+ * schema type) for every field variant the walker can emit. Theme
+ * adapters override entries by supplying their own resolver to the
+ * `<SchemaProvider>` component.
+ *
+ * The headless resolver wires each entry through
+ * {@link makeSvelteRenderer} — which pairs the component constructor
+ * with the per-field props the dispatcher computes, returning a
+ * {@link SvelteRenderDescriptor} that the parent container renderer
+ * mounts via `<Mount descriptor={…} />`.
+ *
+ * Mirror of `react/headless.tsx` — same schema-type coverage, same
+ * accessibility wiring, same fallback policy. Every `WalkedField`
+ * variant the walker can emit has a registered renderer here;
+ * missing a registration would cause `getRenderFunction` to return
+ * `undefined` and the field to render as nothing, so the resolver
+ * registration below is the single source of completeness.
+ */
+
+import { makeSvelteRenderer } from "./types.ts";
+import type { SvelteComponentResolver } from "./types.ts";
+import StringSvelte from "./renderers/String.svelte";
+import NumberSvelte from "./renderers/Number.svelte";
+import BooleanSvelte from "./renderers/Boolean.svelte";
+import EnumSvelte from "./renderers/Enum.svelte";
+import ObjectSvelte from "./renderers/Object.svelte";
+import ArraySvelte from "./renderers/Array.svelte";
+import TupleSvelte from "./renderers/Tuple.svelte";
+import RecordSvelte from "./renderers/Record.svelte";
+import UnionSvelte from "./renderers/Union.svelte";
+import DiscriminatedUnionSvelte from "./renderers/DiscriminatedUnion.svelte";
+import LiteralSvelte from "./renderers/Literal.svelte";
+import NullSvelte from "./renderers/Null.svelte";
+import NeverSvelte from "./renderers/Never.svelte";
+import ConditionalSvelte from "./renderers/Conditional.svelte";
+import NegationSvelte from "./renderers/Negation.svelte";
+import FileSvelte from "./renderers/File.svelte";
+import UnknownSvelte from "./renderers/Unknown.svelte";
+
+/**
+ * Default {@link SvelteComponentResolver} used by `<SchemaComponent>`
+ * / `<SchemaView>` when no theme adapter is provided via
+ * `<SchemaProvider>`.
+ *
+ * Each entry pairs a schema type with the Svelte component
+ * constructor that should render it. {@link makeSvelteRenderer}
+ * wraps the constructor into the
+ * `(props) =\> SvelteRenderDescriptor` shape consumed by the
+ * dispatcher.
+ */
+export const headlessSvelteResolver: SvelteComponentResolver = {
+    string: makeSvelteRenderer(StringSvelte),
+    number: makeSvelteRenderer(NumberSvelte),
+    boolean: makeSvelteRenderer(BooleanSvelte),
+    null: makeSvelteRenderer(NullSvelte),
+    enum: makeSvelteRenderer(EnumSvelte),
+    object: makeSvelteRenderer(ObjectSvelte),
+    array: makeSvelteRenderer(ArraySvelte),
+    tuple: makeSvelteRenderer(TupleSvelte),
+    record: makeSvelteRenderer(RecordSvelte),
+    union: makeSvelteRenderer(UnionSvelte),
+    discriminatedUnion: makeSvelteRenderer(DiscriminatedUnionSvelte),
+    conditional: makeSvelteRenderer(ConditionalSvelte),
+    negation: makeSvelteRenderer(NegationSvelte),
+    literal: makeSvelteRenderer(LiteralSvelte),
+    file: makeSvelteRenderer(FileSvelte),
+    never: makeSvelteRenderer(NeverSvelte),
+    unknown: makeSvelteRenderer(UnknownSvelte),
+};

package/src/svelte/headlessFns.ts

@@ -0,0 +1,124 @@
+/**
+ * Pure helper functions shared by the Svelte 5 headless renderers.
+ *
+ * Ports the framework-agnostic helpers attached to
+ * `react/headlessRenderers.tsx`:
+ *
+ *   - {@link defaultRecordValue} — type-appropriate "new entry" value
+ *     for `RecordField` / `ArrayField`'s Add button.
+ *   - {@link nextRecordKey} — collision-free key generator for the
+ *     Record "Add entry" button.
+ *   - {@link renameRecordKey} — insertion-order-preserving rename.
+ *   - {@link discriminatedUnionValueForTab} — tab-index → emitted
+ *     value mapper for the discriminated-union tabs widget.
+ *
+ * These contain no rendering logic — they are pure functions over
+ * the walked field tree and JS values, so the React and Svelte
+ * adapters share the same behaviour without depending on each
+ * other's rendering surface.
+ */
+
+import type { WalkedField } from "../core/types.ts";
+
+/**
+ * Compute the default value for a freshly added record / array
+ * entry based on the value-type schema. Falls back to a
+ * type-appropriate empty value when the schema does not declare a
+ * default.
+ *
+ * The switch is exhaustive over `WalkedField.type` so a new schema
+ * variant added to the walker forces a deliberate choice of default
+ * here rather than silently producing `undefined`.
+ */
+export function defaultRecordValue(valueType: WalkedField): unknown {
+    if (valueType.defaultValue !== undefined) return valueType.defaultValue;
+    switch (valueType.type) {
+        case "string":
+            return "";
+        case "number":
+            return 0;
+        case "boolean":
+            return false;
+        case "array":
+            return [];
+        case "object":
+        case "record":
+            return {};
+        case "null":
+            return null;
+        case "unknown":
+        case "enum":
+        case "literal":
+        case "tuple":
+        case "union":
+        case "discriminatedUnion":
+        case "conditional":
+        case "negation":
+        case "file":
+        case "never":
+            return undefined;
+    }
+}
+
+/**
+ * Generate a unique, currently-unused key for a new record entry.
+ * Picks the first of `key`, `key-1`, `key-2`, … that is not in
+ * `existing`.
+ */
+export function nextRecordKey(
+    existing: readonly string[],
+    base = "key"
+): string {
+    if (!existing.includes(base)) return base;
+    let i = 1;
+    while (existing.includes(`${base}-${String(i)}`)) i += 1;
+    return `${base}-${String(i)}`;
+}
+
+/**
+ * Rename a key in an object while preserving insertion order.
+ * Returns the original object reference when the rename is a no-op
+ * (`oldKey === newKey`) or when `newKey` collides with an existing
+ * key — the renderer uses reference equality to skip an unnecessary
+ * `props.onChange` call.
+ */
+export function renameRecordKey(
+    obj: Record<string, unknown>,
+    oldKey: string,
+    newKey: string
+): Record<string, unknown> {
+    if (oldKey === newKey) return obj;
+    if (newKey in obj && newKey !== oldKey) return obj;
+    const renamed: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(obj)) {
+        renamed[k === oldKey ? newKey : k] = v;
+    }
+    return renamed;
+}
+
+/**
+ * Pure helper: convert a tab index into the new value the
+ * discriminated union should emit. Returns `undefined` when the index
+ * is out of bounds — callers skip the `onChange` call entirely.
+ *
+ * Extracted so the contract is unit-testable without rendering the
+ * tabs component.
+ */
+export function discriminatedUnionValueForTab(
+    optionLabels: readonly string[],
+    discKey: string,
+    newIndex: number
+): Record<string, string> | undefined {
+    const label = optionLabels[newIndex];
+    if (label === undefined) return undefined;
+    return { [discKey]: label };
+}
+
+/**
+ * Wrap an index into a valid tab index using floored modulo. Used
+ * by the discriminated-union keyboard handler to wrap arrow-key
+ * navigation at the extremes.
+ */
+export function wrapTabIndex(index: number, total: number): number {
+    return ((index % total) + total) % total;
+}

package/src/svelte/renderers/Array.svelte

@@ -0,0 +1,98 @@
+<!--
+    Headless Svelte 5 renderer for `ArrayField` — ordered list with
+    add / remove controls. Mirror of
+    `react/headlessRenderers.tsx :: renderArray`.
+
+    Read-only mode renders the list without controls; an empty array
+    produces no list so leaf nodes in recursive schemas don't get
+    orphaned "Children" labels.
+
+    Editable mode wraps each item in `<li>` with a Remove button and
+    appends an "Add item" button at the foot. `<button type="button">`
+    keeps the controls keyboard-accessible (Space / Enter) without
+    custom key handlers and stops them accidentally submitting any
+    enclosing form.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { ariaLabel } from "../a11y.ts";
+    import { defaultRecordValue } from "../headlessFns.ts";
+    import Mount from "./Mount.svelte";
+
+    const props = $props<SvelteRenderProps>();
+
+    const arr = $derived<unknown[]>(
+        Array.isArray(props.value) ? props.value : []
+    );
+
+    const element = $derived(
+        props.tree.type === "array" ? props.tree.element : undefined
+    );
+</script>
+
+{#if props.tree.type !== "array" || element === undefined}
+    {#if !props.readOnly}
+        <!-- defensive: misconfigured resolver wired this component into a non-array slot. -->
+    {/if}
+{:else if props.readOnly}
+    {#if arr.length > 0}
+        <ul role="group" aria-label={ariaLabel(props.meta.description)}>
+            {#each arr as item, i (i)}
+                {@const child = props.renderChild(
+                    element,
+                    item,
+                    () => {
+                        /* read-only: noop */
+                    },
+                    `[${String(i)}]`
+                )}
+                {#if child !== null}
+                    <li>
+                        <Mount descriptor={child} />
+                    </li>
+                {/if}
+            {/each}
+        </ul>
+    {/if}
+{:else}
+    {@const handleRemove = (index: number) => {
+        const next = arr.slice();
+        next.splice(index, 1);
+        props.onChange(next);
+    }}
+    {@const handleAdd = () => {
+        const next = arr.slice();
+        next.push(defaultRecordValue(element));
+        props.onChange(next);
+    }}
+    <div role="group" aria-label={ariaLabel(props.meta.description)}>
+        <ul>
+            {#each arr as item, i (i)}
+                {@const childOnChange = (v: unknown) => {
+                    const nextArr = arr.slice();
+                    nextArr[i] = v;
+                    props.onChange(nextArr);
+                }}
+                {@const child = props.renderChild(
+                    element,
+                    item,
+                    childOnChange,
+                    `[${String(i)}]`
+                )}
+                <li>
+                    {#if child !== null}
+                        <Mount descriptor={child} />
+                    {/if}
+                    <button
+                        type="button"
+                        aria-label={`Remove item ${String(i)}`}
+                        onclick={() => handleRemove(i)}>Remove</button
+                    >
+                </li>
+            {/each}
+        </ul>
+        <button type="button" aria-label="Add item" onclick={handleAdd}
+            >Add</button
+        >
+    </div>
+{/if}

package/src/svelte/renderers/Boolean.svelte

@@ -0,0 +1,43 @@
+<!--
+    Headless Svelte 5 renderer for `BooleanField` — plain
+    `<input type="checkbox">` mirror of
+    `react/headlessRenderers.tsx :: renderBoolean`.
+
+    Read-only mode renders "Yes" / "No" through a `<span>`, falling
+    back to an em-dash for non-boolean values. Editable mode applies
+    the description as an `aria-label` via `buildAriaAttrs` — there
+    is no separate placeholder slot on a checkbox, so the description
+    drives the accessible name instead.
+-->
+<script lang="ts">
+    import type { SvelteRenderProps } from "../types.ts";
+    import { fieldDomId } from "../../core/idPath.ts";
+    import { EM_DASH } from "../../core/cssClasses.ts";
+    import { buildAriaAttrs } from "../a11y.ts";
+
+    const props = $props<SvelteRenderProps>();
+
+    const id = $derived(fieldDomId(props.path));
+</script>
+
+{#if props.readOnly}
+    {#if typeof props.value !== "boolean"}
+        <span {id}>{EM_DASH}</span>
+    {:else}
+        <span {id}>{props.value ? "Yes" : "No"}</span>
+    {/if}
+{:else}
+    {@const ariaAttrs = buildAriaAttrs(props.tree, props.meta.description)}
+    <input
+        {id}
+        type="checkbox"
+        checked={props.writeOnly ? false : props.value === true}
+        onchange={(e) => {
+            const target = e.currentTarget;
+            if (target instanceof HTMLInputElement) {
+                props.onChange(target.checked);
+            }
+        }}
+        {...ariaAttrs}
+    />
+{/if}