@@ -39,18 +39,18 @@ const props = withDefaults(defineProps<{
3939const slots = useSlots ()
4040
4141const id = ` nc-form-group-${createElementId ()} `
42- const labelId = ` ${id }-label `
4342const descriptionId = ` ${id }-description `
4443
4544const hasDescription = () => !! props .description || !! slots .description
4645const getDescriptionId = () => hasDescription () ? descriptionId : undefined
46+ const hasContentOnly = () => props .hideLabel && (! hasDescription () || props .hideDescription )
4747 </script >
4848
4949<template >
5050 <fieldset
5151 :class =" [$style.formGroup, { [$style.formGroup_noGap]: noGap }]"
5252 :aria-describedby =" getDescriptionId()" >
53- <legend :id = " labelId " : class =" [$style.formGroup__label, { 'hidden-visually': hideLabel }]" >
53+ <legend :class =" [$style.formGroup__label, { 'hidden-visually': hideLabel }]" >
5454 <!-- @slot Custom label content -->
5555 <slot name =" label" >
5656 {{ label || '⚠️ Missing label' }}
@@ -62,7 +62,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
6262 {{ description }}
6363 </slot >
6464 </div >
65- <div :class =" $style.formGroup__content" >
65+ <div :class =" [ $style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }] " >
6666 <!-- @slot Content -->
6767 <slot />
6868 </div >
@@ -96,7 +96,7 @@ const getDescriptionId = () => hasDescription() ? descriptionId : undefined
9696 gap : var (--form-group-content-gap );
9797 margin-block-start : calc (4 * var (--default-grid-baseline ));
9898
99- & :first-child {
99+ & .formGroup__content_only {
100100 margin-block-start : 0 ;
101101 }
102102}
@@ -126,4 +126,22 @@ Labelled group of form elements.
126126 </NcFormGroup>
127127</template>
128128```
129+
130+ ### Hidden label/description
131+
132+ You can visually hide the label and/or the description.\
133+ Note: you still must provide the label. Do not visually hide the missing label warning!
134+
135+ ```vue
136+ <template>
137+ <NcFormGroup
138+ label="Personal information"
139+ description="Your contact details"
140+ hide-label
141+ hide-description>
142+ <NcTextField label="First name" />
143+ <NcTextField label="Last name" />
144+ </NcFormGroup>
145+ </template>
146+ ```
129147</docs >
0 commit comments