Form

<ui:exposeToClient />

<ui:form controlled="{true}" rootId="example-form" class="min-w-[275px]">

    <ui:field.root name="homepage" required="{true}" defaultValue="https://example.com">
        <ui:field.label>Homepage</ui:field.label>
        <ui:field.control asChild="{true}">
            <ui:input type="url" placeholder="https://example.com" />
        </ui:field.control>
        <ui:field.error />
    </ui:field.root>

    <ui:button type="submit">Submit</ui:button>
</ui:form>

<vite:asset entry="EXT:docs/Resources/Private/Components/FormExample/FormExample.entry.ts" />

import { getHydrationData, mount } from 'fluid-primitives';
import { Form, ValidationError } from 'fluid-primitives/form';

mount('form-example', () => {
	const data = getHydrationData('form', 'example-form');
	if (!data) return;

	const form = new Form({
		...data.props,
		onSubmit: async ({ formData, api }) => {
			await new Promise(resolve => setTimeout(resolve, 800));

			const formEl = api.getFormEl();
			const urlInput = formEl?.querySelector<HTMLInputElement>('input[name="homepage"]');
			if (!urlInput?.checkValidity()) {
				throw new ValidationError({
					homepage: { messages: ['Please enter a valid url.'] },
				});
			}

			if (formData.get('homepage') === 'https://example.com') {
				throw new ValidationError({
					homepage: { messages: ['The example homepage is not allowed.'] },
				});
			}

			console.log(Object.fromEntries(formData.entries()));

			return true;
		},
		render: form => {
			form.api
				.getFormEl()
				?.querySelector('button[type="submit"]')
				?.setAttribute('aria-disabled', form.api.isSubmitting ? 'true' : 'false');
		},
	});

	form.init();
});