form group

CdrFormGroup is a simple wrapper component providing structure and consistent spacing when composing various form layouts.

Grouping related form controls makes forms more understandable for all users. Use the fieldset and legend elements to provide necessary context for users who rely on screen readers.

What Cedar provides

CdrFormGroup provides a simple fieldset and legend wrapper for form element components.

Using this component ensures your form:

• Communicates to screen readers that a group of form fields relate to each other
• Provides a label for the group
• Makes it easier for users to understand the purpose of the form group's controls

Development responsibilities

When using this component, here's what you are responsible for:

• Using the label prop or slot to explain what the form elements are—this text will be used for the legend element
• Creating brief, descriptive label text—screen readers may repeat the legend for each control in the group

In CdrFormGroup, all the related fields go inside the fieldset element. The legend element is used to represent the form section’s question or overall theme.

For projects that cannot make use of the Vue.js component, the CdrFormGroup styles are available through the @rei/cdr-component-variables package as SCSS mixins. These can be applied to plain HTML elements. See examples on the component variables page.

Label override

Rather than passing a label prop, customize the label element using the label slot.

<cdr-form-group>
  <template #label>
    <cdr-text
      tag="span"
      style="font-size: 24px;"
    >
      Optional Label Slot Override
    </cdr-text>
  </template>
  <cdr-checkbox
    custom-value="A"
    v-model="ex"
    :background="backgroundColor"
  >
    A
  </cdr-checkbox>
  <cdr-checkbox
    custom-value="B"
    v-model="ex"
    :background="backgroundColor"
  >
    B
  </cdr-checkbox>
  <cdr-checkbox
    custom-value="C"
    v-model="ex"
    :background="backgroundColor"
  >
    C
  </cdr-checkbox>
</cdr-form-group>

Validation

Render a form group with validation and error state.

<cdr-form-group
  label="What's your favorite letter?"
  :error="modelError"
  :required="true"
>
  <cdr-checkbox
    custom-value="A"
    v-model="ex"
    :background="backgroundColor"
    @input="validate"
  >
    A
  </cdr-checkbox>
  <cdr-checkbox
    custom-value="B"
    v-model="ex"
    :background="backgroundColor"
    @input="validate"
  >
    B
  </cdr-checkbox>
  <cdr-checkbox
    custom-value="C"
    v-model="ex"
    :background="backgroundColor"
    @input="validate"
  >
    C
  </cdr-checkbox>
</cdr-form-group>