Skip to content
svelte-jsonschema-form
Playground

Skeleton

v3 RC1v3

Installation

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

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 a line like this to the app.css file.

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

Extra widgets

Section titled “Extra widgets”
  • checkboxes
  • date-picker
  • file-upload
  • file
  • multi-select
  • radio-buttons
  • radio
  • range
  • rating
  • slider
  • switch
  • tags
  • textarea

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”