Iimprove the FormGroup's appearance

[LSE Crew]

Hi,

Is it possible to improve the FormGroup's appearance, for example, by adding an icon in front of the "Labeltext" and showing/hiding the content like the sfAccordion can do by clicking the V at the end of the line?

Thanks

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi LSE Crew,

 

We’ve achieved the requested functionality by combining the Accordion component with DataForm sections.

 

[Razor]

<!-- First Section -->

        <AccordionItem Header="Personal Information" IconCss="e-icons e-user" Expanded="true">

            <ContentTemplate>

                <SfDataForm Model="@userModel" ColumnCount="2" EnableFloatingLabel="true">

                    <FormValidator>

                        <DataAnnotationsValidator />

                    </FormValidator>

                    <FormItems>

                        <FormItem Field="@nameof(UserModel.FirstName)" EditorType="FormEditorType.TextBox" />

                        <FormItem Field="@nameof(UserModel.LastName)" EditorType="FormEditorType.TextBox" />

                        <FormItem Field="@nameof(UserModel.Email)" EditorType="FormEditorType.TextBox" />

                        <FormItem Field="@nameof(UserModel.BirthDate)" EditorType="FormEditorType.DatePicker" />

                    </FormItems>

                </SfDataForm>

            </ContentTemplate>

        </AccordionItem>

 

 

• To address the need for icons in front of labels, we used the IconCss property of each AccordionItem. This allows you to visually represent the section (e.g., user, location, settings) with a meaningful icon.
• To provide the expand/collapse behavior similar to your request, we placed each form group inside an AccordionItem. The built‑in expand/collapse toggle (the “V” arrow) lets users show or hide the content interactively, just as you described.
• Each section of the form (Personal Information, Address Details, Account Settings) is neatly organized inside its own accordion panel, ensuring both clarity and a modern appearance.
• Finally, we added a Submit All button outside the accordion so the entire form can be submitted together, regardless of which sections are expanded or collapsed.

 

This approach gives you exactly what you asked for: form groups with icons and collapsible content, achieved in a clean and reusable way using Syncfusion’s Accordion and DataForm components.

 

For your reference, we’ve also included a sample showing this in action along with a GIF demonstration

Gif:

 

Sample: https://blazorplayground.syncfusion.com/embed/rZBnjKsgpyPpuwcN?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[LSE Crew]

hi,

Indeed, I opted for the sfAccordion system, which meets my needs.

Thank you.

[Shereen Shajahan]

Hi LSE

Thank you for the update. Please get back to us for assistance in the future.

Regards,

Shereen