From 5ce97c04516b5af92e49e11bcd55025be04fc87f Mon Sep 17 00:00:00 2001 From: lajczi Date: Sat, 21 Mar 2026 18:56:03 +0100 Subject: [PATCH 1/3] feat: add option to disable field label rendering Signed-off-by: lajczi --- src/runtime/components/AutoFormPrimitive.vue | 7 ++++--- src/runtime/types/index.d.ts | 6 ++++++ src/runtime/types/zod.d.ts | 3 ++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/runtime/components/AutoFormPrimitive.vue b/src/runtime/components/AutoFormPrimitive.vue index f0a8432..e1a8fd2 100644 --- a/src/runtime/components/AutoFormPrimitive.vue +++ b/src/runtime/components/AutoFormPrimitive.vue @@ -81,7 +81,7 @@ const fields = computed(() => { formField: { name: key, slots: findSlots(key), - ...parseMeta(meta, key), + ...parseMeta(meta, key, appConfig.value), }, component: meta?.input?.component ?? result.component, props: defu(defaultProps, meta?.input?.props, result.componentProps ?? {}), @@ -97,9 +97,10 @@ function findSlots(key: string): string[] { .map(name => name.slice(key.length + 1)) } -function parseMeta(meta: any, key: string) { +function parseMeta(meta: any, key: string, config: AutoFormConfig) { + const showLabel = meta.title !== false && config?.theme?.label !== false return { - label: meta.title ?? upperFirst(splitByCase(key).join(' ').toLowerCase()), + label: showLabel ? (meta.title ?? upperFirst(splitByCase(key).join(' ').toLowerCase())) : undefined, required: meta.required, description: meta.description, hint: meta.hint, diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts index e1171f7..6cc5156 100644 --- a/src/runtime/types/index.d.ts +++ b/src/runtime/types/index.d.ts @@ -37,6 +37,12 @@ export interface AutoFormConfig { * @default true */ wFull?: boolean + /** + * Render field labels globally. Set to `false` to hide all labels. + * Can be overridden per-field via `meta().title = false`. + * @default true + */ + label?: boolean } /** diff --git a/src/runtime/types/zod.d.ts b/src/runtime/types/zod.d.ts index 94bbc9b..17b7e37 100644 --- a/src/runtime/types/zod.d.ts +++ b/src/runtime/types/zod.d.ts @@ -36,12 +36,13 @@ declare module 'zod' { /** * Field label displayed in the form's label row. * Maps directly to `UFormField.label`. + * Set to `false` to hide the label for this field. * * @remarks Added by `nuxt-auto-form` * @default Field name in PascalCase with spaces * @see https://ui.nuxt.com/components/form-field#description */ - title?: string + title?: string | false /** * Marks the field as required in the UI (asterisk, aria-required). From b13ce0cfea738dcac89eb324d022ec14c88ef9c6 Mon Sep 17 00:00:00 2001 From: lajczi Date: Sat, 21 Mar 2026 18:57:45 +0100 Subject: [PATCH 2/3] docs: document label disable option Signed-off-by: lajczi --- docs/content/2.customization/1.config.md | 6 ++++++ docs/content/2.customization/2.fields.md | 5 +++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/content/2.customization/1.config.md b/docs/content/2.customization/1.config.md index 854a5df..266d69d 100644 --- a/docs/content/2.customization/1.config.md +++ b/docs/content/2.customization/1.config.md @@ -143,6 +143,12 @@ This feature is in development! * @default true */ wFull?: boolean + /** + * Render field labels globally. Set to `false` to hide all labels. + * Can be overridden per-field via `meta().title = false`. + * @default true + */ + label?: boolean } ``` diff --git a/docs/content/2.customization/2.fields.md b/docs/content/2.customization/2.fields.md index 2173bc2..5ca3571 100644 --- a/docs/content/2.customization/2.fields.md +++ b/docs/content/2.customization/2.fields.md @@ -17,9 +17,10 @@ Fields below are used to customize the [FormField](https://ui.nuxt.com/component They map directly to properties inside `UFormField` Nuxt UI component. ::field-group - ::field{name="title" type="string"} + ::field{name="title" type="string | false"} Field label displayed in the form's label row. Maps directly to `UFormField.label`.\ - If not provided, it defaults to the field name with capitalization and spaces. + If not provided, it defaults to the field name with capitalization and spaces.\ + Set to `false` to hide the label for this specific field. :: ::field{name="required" type="string"} From 9dcdeb3c98df8b6e82ce4e0e3104ed0a8e577ec0 Mon Sep 17 00:00:00 2001 From: norbiros Date: Sat, 28 Mar 2026 16:16:09 +0100 Subject: [PATCH 3/3] tests: add `title_null_field` schema and e2e test for no-label behavior --- playground/app/components/MyForm.vue | 3 +++ playground/tests/e2e/basic.test.ts | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/playground/app/components/MyForm.vue b/playground/app/components/MyForm.vue index 76a6774..3fd79a4 100644 --- a/playground/app/components/MyForm.vue +++ b/playground/app/components/MyForm.vue @@ -53,6 +53,9 @@ const schema = z.object({ multiple_input: z .array(z.enum(ENUM_MULTIPLE)) .meta({ title: 'Multiple Enum Input' }), + title_null_field: z.string() + .optional() + .meta({ title: null }), }) function onSubmit(data: Record) { diff --git a/playground/tests/e2e/basic.test.ts b/playground/tests/e2e/basic.test.ts index 5b4f545..e8aaa06 100644 --- a/playground/tests/e2e/basic.test.ts +++ b/playground/tests/e2e/basic.test.ts @@ -1,5 +1,11 @@ import { expect, test } from '@nuxt/test-utils/playwright' +test('title null field has no label', async ({ page }) => { + await page.goto('/', { waitUntil: 'networkidle' }) + + await expect(page.getByLabel('Title null field')).not.toBeVisible() +}) + test('test very basic form', async ({ page }) => { await page.goto('/', { waitUntil: 'networkidle' })