Related content

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 to using ChoicesField as it allows you to pass multiple options with the expected design

In cases where you need only a single checkbox for something like accepted a terms and conditions, use CheckboxField.

                                                        
                                                        
                                                            // Before
                                                        <Flex
                                                          alignItems="center"
                                                          onClick={() => setButtonDisabled(!buttonDisabled)}
                                                          style={{ cursor: 'pointer' }}
                                                        >
                                                          <Checkbox checked={!buttonDisabled} onChange={() => setButtonDisabled(!buttonDisabled)} />
                                                          <Spacer size={8} />
                                                          <Text>I agree with the terms and conditions</Text>
                                                        </Flex>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <CheckboxField 
                                                          onChange={() => setButtonDisabled((prevButtonDisabled) => !prevButtonDisabled)}
                                                          selected={!buttonDisabled}
                                                          valueLabel="I agree with the terms and conditions"
                                                        />
                                                        
                                                            

When using a radio button as a part of a small piece of larger component, you might use CheckboxControl.

And in rare cases you need to style a radio button completely different than the design system component, let us known and look at using CheckboxPrimitive.

Almost 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.

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.