Skip to content
svelte-jsonschema-form
Playground

Skeleton

v3 RC1v3

Installation

Section titled “Installation”
Terminal window
npm i @sjsf/skeleton3-theme

@skeletonlabs/skeleton ^3.1.0 and @skeletonlabs/skeleton-svelte ^1.2.0 are required.

Install Skeleton v3

Section titled “Install Skeleton v3”

Install and configure Skeleton for SvelteKit

Configuration

Section titled “Configuration”

Register the theme source path by adding the following line to the app.css file:.

@source "../node_modules/@sjsf/skeleton3-theme/dist";

Extra widgets

Section titled “Extra widgets”

You can connect extra widgets using the following include imports:

// Used by default in the following fields: multiEnumField
import "@sjsf/skeleton3-theme/extra-widgets/checkboxes-include"
import "@sjsf/skeleton3-theme/extra-widgets/date-picker-include"
import "@sjsf/skeleton3-theme/extra-widgets/file-upload-include"
// Used by default in the following fields: fileField, filesField
import "@sjsf/skeleton3-theme/extra-widgets/file-include"
import "@sjsf/skeleton3-theme/extra-widgets/multi-select-include"
import "@sjsf/skeleton3-theme/extra-widgets/radio-buttons-include"
import "@sjsf/skeleton3-theme/extra-widgets/radio-include"
import "@sjsf/skeleton3-theme/extra-widgets/range-include"
import "@sjsf/skeleton3-theme/extra-widgets/rating-include"
import "@sjsf/skeleton3-theme/extra-widgets/slider-include"
import "@sjsf/skeleton3-theme/extra-widgets/switch-include"
// Used by default in the following fields: tagsField
import "@sjsf/skeleton3-theme/extra-widgets/tags-include"
import "@sjsf/skeleton3-theme/extra-widgets/textarea-include"

UI options

Section titled “UI options”
import type { ComponentProps as SvelteComponentProps } from "svelte";
import type {
  HTMLAttributes,
  HTMLButtonAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLLabelAttributes,
  HTMLSelectAttributes,
  HTMLTextareaAttributes,
} from "svelte/elements";
import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";
import type {
  FileUpload as SkeletonFileUpload,
  Rating as SkeletonRating,
  Segment,
  Slider as SkeletonSlider,
  Switch as SkeletonSwitch,
  TagsInput,
} from "@skeletonlabs/skeleton-svelte";


export interface UiOptions {
  /**
   * Overrides the attributes of any button component.
   */
  button?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of a button with a specific type.
   * This override takes precedence over the `button` override, but does not replace it.
   */
  buttons?: {
    [B in ButtonType]?: HTMLButtonAttributes;
  };
  /**
   * Overrides the attributes of the description.
   */
  descriptionAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the errors list.
   */
  errorsList?: HTMLAttributes<HTMLUListElement>;


  form?: HTMLFormAttributes;
  /**
   * Overrides the attributes of the help.
   */
  helpAttributes?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of the field label.
   */
  labelAttributes?: HTMLLabelAttributes;
  /**
   * Overrides the attributes of any layout component.
   */
  layout?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of a layout with a specific type.
   * This override takes precedence over the `layout` override, but does not replace it.
   */
  layouts?: {
    [L in LayoutType]?: HTMLAttributes<HTMLDivElement>;
  };
  submitButton?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;


  checkbox?: HTMLInputAttributes;


  number?: HTMLInputAttributes;


  select?: HTMLSelectAttributes;


  text?: HTMLInputAttributes;


  checkboxes?: HTMLInputAttributes;


  datePicker?: HTMLInputAttributes;


  file?: HTMLInputAttributes;


  multiSelect?: HTMLSelectAttributes;


  radio?: HTMLInputAttributes;


  range?: HTMLInputAttributes;


  textarea?: HTMLTextareaAttributes;


  skeleton3FileUpload?: SvelteComponentProps<typeof SkeletonFileUpload>;


  skeleton3Segment?: SvelteComponentProps<typeof Segment>;
  skeleton3SegmentItem?: SvelteComponentProps<typeof Segment.Item>;


  skeleton3Rating?: SvelteComponentProps<typeof SkeletonRating>;


  skeleton3Slider?: SvelteComponentProps<typeof SkeletonSlider>;


  skeleton3Switch?: SvelteComponentProps<typeof SkeletonSwitch>;


  skeleton3Tags?: SvelteComponentProps<typeof TagsInput>;
}

Widgets demo

Section titled “Widgets demo”