Group related input elements together
CdrFormGroup is a simple wrapper component that provides structure and consistent spacing when composing various form layouts.
Grouping related form controls makes forms more understandable for all users, and utilizing the
legend elements provides necessary context for users that rely on screen readers.
Rather than passing a
label prop, the label element can be customized using the
CdrFormGroup provides a simple
legend wrapper for form element components. Using this component will ensure that your form communicates to screen readers that a group of form fields relate to each other, and will provide a label for the group.
When not semantically grouped, form elements mixed with text descriptions can quickly lose context to users who rely on non-visual means. Grouping controls makes it easier for users to understand their purpose
In CdrFormGroup, all of the related fields go inside the
fieldset element, and the
legend element is used to represent the question or overall theme of this section of your form.
labelprop or slot to explain what the form elements are, this text will be used for the
labeltext should be brief and descriptive
Sets the label/legend for the form group. Applies default text styles to this label. To override that default text style or apply other customization, use the `label` slot.
Find more information about using Slots in the article Getting Started as a Developer.
Slot for CdrFormGroup content. Should include a set of form elements.
Slot to override the CdrFormGroup label/legend. Should be a text element.