FormGroup
CdrFormGroup
Groups 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.
# Validation
Render a form group with validation and error state
# Disabled
Render a form group in a disabled state
# 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
labelprop or slot to explain what the form elements are, this text will be used for thelegendelement - Screen readers may repeat the legend for each control in the group, so the
labeltext 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
View it on Github: https://github.com/rei/rei-cedar-vue-2/tree/next/src/components/formGroup# 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.
error
name
boolean
type
false
default
Sets the form group to an error state, displays the `error` slot if one is present.
errorRole
name
string
type
status
default
Sets the `role` attribute for the embedded error state messaging.
disabled
name
boolean
type
false
default
Renders form group in a disabled state.
required
name
boolean
type
false
default
Adds required label to the form group.
optional
name
boolean
type
false
default
Adds optional label to the form group.
# Slots
Find more information about using Slots in the article Installing Cedar.
default
name
Slot for CdrFormGroup content. Should include a set of form elements.
error
name
Error messaging text that is displayed when the `error` prop is true.
label
name
Slot to override the CdrFormGroup label/legend. Should be a text element.