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, but if you need a solitary radio button look at using RadioControl or if you have a rare cases where you need a radio button with divergent styles use RadioPrimitive.

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

Examples

                                                        
                                                        
                                                            // Before
                                                        <Box>
                                                          <Flex alignItems="center">
                                                            <SectionHeader
                                                              icon="eye"
                                                              title="Team members log-in"
                                                              description="Select to make it required or optional for your team members to log in via SSO."
                                                              color={colors.neutral900}
                                                              background="none"
                                                            />
                                                          </Flex>
                                                          <Box>
                                                            <Flex
                                                              p="12px"
                                                              pr="24px"
                                                              flexDirection="row"
                                                              justifyContent="space-between"
                                                              alignItems="center"
                                                            >
                                                              <Flex flexDirection="column">
                                                                <Text>Required SSO log-in</Text>
                                                                <Text type="caption" color="default.main.secondary">
                                                                  Your team members will be required to log in using their SSO credentials. Only the team
                                                                  owner will be able to log in with a Maze password.
                                                                </Text>
                                                              </Flex>
                                                              <RadioDeprecated
                                                                selected={TeamSsoRequired.Enabled === ssoRequired}
                                                                onChange={() => onSsoRequiredChange(TeamSsoRequired.Enabled)}
                                                                data-e2e="enable-sso-required-radio"
                                                              />
                                                            </Flex>
                                                            <Flex
                                                              p="12px"
                                                              pr="24px"
                                                              flexDirection="row"
                                                              justifyContent="space-between"
                                                              alignItems="center"
                                                            >
                                                              <Flex flexDirection="column">
                                                                <Text>Optional SSO log-in</Text>
                                                                <Text type="caption" color="default.main.secondary">
                                                                  Your team members will be able to log in using either their Maze password or their SSO
                                                                  credentials.
                                                                </Text>
                                                              </Flex>
                                                              <RadioDeprecated
                                                                selected={TeamSsoRequired.Disabled === ssoRequired}
                                                                onChange={() => onSsoRequiredChange(TeamSsoRequired.Disabled)}
                                                                data-e2e="disable-sso-required-radio"
                                                              />
                                                            </Flex>
                                                          </Box>
                                                        </Box>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <ChoicesField
                                                          label="Team members log-in"
                                                          description="Select to make it required or optional for your team members to log in via SSO"
                                                          name="sso-required"
                                                          options={[
                                                            {
                                                              label: 'Required SSO log-in',
                                                              value: TeamSsoRequired.Enabled,
                                                              description: 'Your team members will be required to log in using their SSO credentials. Only the team owner will be able to log in with a Maze password',
                                                            },
                                                            {
                                                              label: 'Optional SSO log-in',
                                                              value: TeamSsoRequired.Disabled,
                                                              description: 'Your team members will be able to log in using either their Maze password or their SSO credentials',
                                                            },
                                                          ]}
                                                          type='single-select'
                                                          onChange={(value) => { onSsoRequiredChange(value as TeamSsoRequired) }}
                                                          value={ssoRequired}
                                                        />
                                                        
                                                            

Let Us Know

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