Schema form: every field type example

Schema form: every field type

One page with every field type of the form schema (text, textarea, number, email, url, date, time, select, multiselect, checkbox, radio, switch, slider, file and tags), each a texuli control with its label, description and errors.

Schema form: every field type

forms-fields · forms/SchemaForm

forms schema

Props

form
labels
values

Live example loads in an isolated same-origin preview frame.

Source (forms/FormsFieldsDemo.svelte)

<script lang="ts">
import { SchemaForm } from '@texuli/forms';
import { validateFormSchema } from '@texuli/forms/model';
import { FIELDS_SCHEMA } from './schemas.ts';

const result = validateFormSchema(FIELDS_SCHEMA);
</script>

<section data-example="forms-fields" class="demo" aria-label="Schema form field types">
  {#if result.ok}
    <SchemaForm
      form={result.form}
      values={{ title: 'Harbor Notes', workspace: 'lumen', shared: ['harbor'], plan: 'team', priority: 6, labels: ['launch'] }}
    />
  {/if}
</section>

<style>
  .demo {
    padding: 1.5rem;
    min-block-size: 40rem;
    color: var(--tx-foreground, CanvasText);
    background: var(--tx-background, Canvas);
  }
</style>