Custom widgets

Example

import type { HTMLInputAttributes } from 'svelte/elements';

import type { Widget, WidgetCommonProps, Widgets, WidgetType } from '@sjsf/form';
import { theme } from '@sjsf/form/basic-theme';

import ToggleWidget from './toggle-widget.svelte';

declare module '@sjsf/form' {
  export interface WidgetsAndProps<V> {
    toggle: WidgetCommonProps<V, HTMLInputAttributes>;
  }

  export interface WidgetValue {
    toggle: boolean;
  }
}

// Creating new theme
const registry: { [T in WidgetType]: Widget<T> } = {
  ...,
  toggle: ToggleWidget
};
// @ts-expect-error
export const widgets: Widgets = (type) => registry[type];


// Extension of existing theme
// @ts-expect-error
export const widgets: Widgets = (type, config) => {
  if (type === "toggle") {
    return ToggleWidget
  }
  return theme.widgets(type, config)
}