@@ -53,18 +53,18 @@ const slots = defineSlots<{
5353}>()
5454
5555const id = ` nc-form-group-${createElementId ()} `
56- const labelId = ` ${id }-label `
5756const descriptionId = ` ${id }-description `
5857
5958const hasDescription = () => !! description || !! slots .description
6059const getDescriptionId = () => hasDescription () ? descriptionId : undefined
60+ const hasContentOnly = () => hideLabel && (! hasDescription () || hideDescription )
6161 </script >
6262
6363<template >
6464 <fieldset
6565 :class =" [$style.formGroup, { [$style.formGroup_noGap]: noGap }]"
6666 :aria-describedby =" getDescriptionId()" >
67- <legend :id = " labelId " : class =" [$style.formGroup__label, { 'hidden-visually': hideLabel }]" >
67+ <legend :class =" [$style.formGroup__label, { 'hidden-visually': hideLabel }]" >
6868 <slot name =" label" >
6969 {{ label || '⚠️ Missing label' }}
7070 </slot >
@@ -74,7 +74,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
7474 {{ description }}
7575 </slot >
7676 </div >
77- <div :class =" $style.formGroup__content" >
77+ <div :class =" [ $style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }] " >
7878 <slot />
7979 </div >
8080 </fieldset >
@@ -106,8 +106,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
106106 flex-direction : column ;
107107 gap : var (--form-group-content-gap );
108108 margin-block-start : calc (4 * var (--default-grid-baseline ));
109-
110- & :first-child {
109+ & .formGroup__content_only {
111110 margin-block-start : 0 ;
112111 }
113112}
@@ -137,4 +136,22 @@ Labelled group of form elements.
137136 </NcFormGroup>
138137</template>
139138```
139+
140+ ### Hidden label/description
141+
142+ You can visually hide the label and/or the description.\
143+ Note: you still must provide the label. Do not visually hide the missing label warning!
144+
145+ ```vue
146+ <template>
147+ <NcFormGroup
148+ label="Personal information"
149+ description="Your contact details"
150+ hide-label
151+ hide-description>
152+ <NcTextField label="First name" />
153+ <NcTextField label="Last name" />
154+ </NcFormGroup>
155+ </template>
156+ ```
140157</docs >
0 commit comments