FormGroup

Group related input elements together

# Overview

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 fieldset and legend elements provides necessary context for users that rely on screen readers.

# Default

# Label Override

Rather than passing a label prop, the label element can be customized using the label slot.

# Accessibility

CdrFormGroup provides a simple fieldset and 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.

  • Use the label prop or slot to explain what the form elements are, this text will be used for the legend element
  • Screen readers may repeat the legend for each control in the group, so the label text should be brief and descriptive

# Guidelines

# Use when

  • Creating groups of checkboxes or radio buttons for a single, multiple-choice selection
  • Grouping several inputs related to the same topic, such as selecting the color, size and quantity of a product OR grouping fields for a delivery address during checkout

# Don’t use when

  • Creating a single form field that asks for a single piece of information

# API

# Props

label

name

string

type

none

default

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.

# Slots

Find more information about using Slots in the article Getting Started as a Developer.

default

name

Slot for CdrFormGroup content. Should include a set of form elements.

label

name

Slot to override the CdrFormGroup label/legend. Should be a text element.