import { Meta } from '@storybook/addon-docs/blocks';

RadioGroup Migration

Fluent UI Northstar (v0) provides the RadioGroup control for presenting a list of radio options. Fluent UI v9 also provides a RadioGroup control but with a different API.

While there are several differences between these controls, the primary change is that RadioGroup v9 accepts its options as child Radio components while RadioGroup v0 accepts options via its items prop.

Examples

Basic Migration

Basic usage of RadioGroup v0 looks like

tsx

import * as React from 'react';
import { RadioGroup } from '@fluentui/react-northstar';

const RadioGroupV0BasicExample = () => {
  const items = [
    { name: 'pizza', key: 'Capricciosa', label: 'Capricciosa', value: 'capricciosa' },
    {
      name: 'pizza',
      key: 'Prosciutto',
      label: 'Prosciutto',
      value: 'prosciutto',
      disabled: true,
    },
  ];

  return <RadioGroup defaultCheckedValue="capricciosa" items={items} />;
};

An equivalent RadioGroup v9 usage is

tsx

import * as React from 'react';
import { Label, Radio, RadioGroup } from '@fluentui/react-components';
import { useId } from '@fluentui/react-utilities';

const RadioGroupV9BasicExample = () => {
  const labelId = useId('label-');

  return (
    <>
      <Label id={labelId} required>
        Pick a Pizza
      </Label>
      <RadioGroup aria-labelledby={labelId} defaultValue="capricciosa">
        <Radio value="capricciosa" label="Capricciosa" />
        <Radio value="prosciutto" label="Prosciutto" disabled />
      </RadioGroup>
    </>
  );
};

Prop Mapping

This table maps RadioGroup v0 props to the RadioGroup v9 equivalent.

v0	v9	Notes
`accessibility`	n/a
`as`	n/a
`checkedValue`	`value`	Mutually exclusive with `defaultValue`
`className`	`className`
`defaultCheckedValue`	`defaultValue`	Mutually exclusive with `value`
`design`	n/a
`items`	`children`	v9 uses React `children` rather than data props
`key`	`key`	v9 uses the intrinsic React prop
`onCheckedValueChange`	`onChange`
`ref`	`ref`
`styles`	`className`
`variables`	n/a	Use `FluentProvider` to customize themes
`vertical`	`layout`

This table maps v0 RadioGroupItem props to the v9 Radio equivalent.

v0	v9	Notes
`accessibility`	n/a
`as`	n/a
`checked`	`checked`
`checkedIndicator`	`indicator`	Use slots to customize `Radio`
`className`	`className`
`defaultChecked`	`defaultChecked`
`design`	n/a
`disabled`	`disabled`
`indicator`	`indicator`	Use slots to customize `Radio`
`key`	`key`	v9 uses the intrinsic React prop
`label`	`label`	In v9 this is a slot so this prop can be a string, a component or a shorthand object
`name`	`name`	When used inside `RadioGroup` this is assigned via the `name` prop on `RadioGroup` or given a default value when not assigned there
`onChange`	`onChange`
`ref`	`ref`
`shouldFocus`	n/a
`styles`	`className`
`value`	n/a
`variables`	n/a	Use `FluentProvider` to customized themes
`vertical`	n/a	`labelPosition` can be used to change the location of the label text