FormGroup

Overview

Benefits

1. 1:1 parity design/development.
2. Simplified properties and usage
1. On the design side, we simplified the rules and styling, all available via semantic tokens.
2. On the code side, we moved to a more all in one component that should improve developer experience
3. Better accessibility.

How to migrate

In most cases you should migrate try to migrate to the related Field component:

• CheckboxField
• ChoicesField
• TextAreaField
• TextInputField

                                                        
                                                        
                                                            // Before
                                                        <FormGroup mb="16px" label="Work Email" labelFor="signup-form-email">
                                                          <Input
                                                            name="email"
                                                            inputRef={refs.set('emailInput')}
                                                            type="email"
                                                            autoComplete="email"
                                                            value={formData.email.value}
                                                            onChange={formData.email.set}
                                                            onBlur={formData.email.blur}
                                                            placeholder="name@company.com"
                                                            data-e2e="signup-form-email"
                                                            id="signup-form-email"
                                                            validation={getFieldValidation('email')}
                                                          />
                                                        </FormGroup>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <TextInputField
                                                          type="email"
                                                          name="email"
                                                          label="Work Email"
                                                          inputRef={refs.set('emailInput')}
                                                          autoComplete="email"
                                                          value={formData.email.value}
                                                          onChange={formData.email.set}
                                                          onBlur={formData.email.blur}
                                                          placeholder="name@company.com"
                                                          data-e2e="signup-form-email"
                                                          id="signup-form-email"
                                                          error={getFieldValidation('email').error}
                                                        />
                                                        
                                                            

If you are using a custom control look at using the stand alone Field component.

                                                        
                                                        
                                                            // Before
                                                        <FormGroup label="Invite by link" labelFor="invite-team-public-link" mb={0}>
                                                          <CopyLinkInput
                                                            link={magicLink}
                                                            inputStyle={{ fontWeight: 400 }}
                                                            inputProps={{ id: 'invite-team-public-link', borderless: false }}
                                                          />
                                                        </FormGroup>
                                                        
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <Field>
                                                          <CopyLinkInput
                                                            link={magicLink}
                                                            inputStyle={{ fontWeight: 400 }}
                                                            inputProps={{ id: 'invite-team-public-link', borderless: false }}
                                                          />
                                                        </Field>
                                                        
                                                            

Most props should match between the previous RadioDeprecated and the new components, the difference being ChoicesField and ChoicesControl take an array of options and need to be set as type single-select to be used as radio buttons.

There are also the follow exceptions:

checked

The checked prop was updated to be selected to match RadioControl and ChoicesField.

stopPropagation

The stopPropagation prop was removed. Use the second param of the onChange callback to access the event and stop propagtion using that.

                                                        
                                                        
                                                            const handleChange = (value, event) => {
                                                          event.stopPropagtion()
                                                        }
                                                        
                                                        <CheckboxControl onChange={handleChange} />
                                                        
                                                            

Examples

Let Us Know

For cases where you are not easily able to migrate CheckboxDeprecated or it is missing a property you need, let us know in #design-system.