Skip to content
svelte-jsonschema-form
Playground

Labels and icons

Translation

One of the mandatory components of a form is translate. You can see its use in various places in the form (various buttons and labels).

Translations are imported from @sjsf/form/translations/{locale}, currently supported locales:

  • en
  • ru
Translation API reference

Icons

Text is good, but you can do better by adding icons!

<script lang="ts">
  import type { Snippet } from "svelte";
  import type { Schema } from "@sjsf/form";


  import CustomForm from "@/components/custom-form.svelte";


  const { children: icon }: { children: Snippet } = $props();


  const schema: Schema = {
    title: "With icon",
  };
  let value = $state();
</script>


<CustomForm
  bind:value
  icons={{ submit: icon }}
  {schema}
  onSubmit={console.log}
/>

Icons API reference

There are also ready-made sets of icons for control buttons.

Lucide icons

Installation:

Terminal window
npm i @sjsf/lucide-icons

Usage:

<script lang="ts">
  import { Form } from '@sjsf/form';
  import { icons } from '@sjsf/lucide-icons';
</script>


<Form {icons} />

Playground

Flowbite icons

Installation:

Terminal window
npm i @sjsf/flowbite-icons

Add icons content to a tailwindcss config:

import { FLOWBITE_ICONS_CONTENT } from '@sjsf/flowbite-icons/preset'


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}', FLOWBITE_ICONS_CONTENT],
}

Usage:

<script lang="ts">
  import { Form } from '@sjsf/form';
  import { icons } from '@sjsf/flowbite-icons';
</script>


<Form {icons} />

Playground