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

Checkbox Migration

Fluent UI v8 provides the Checkbox control to give people a way to select one or more items from a group, or switch between two mutually exclusive options. Fluent UI v9 provides a Checkbox control, but has a different API.

The main difference between v8 and v9 Checkbox is that v9 offers a circular variant. v9 handles checked and indeterminate differently from v8, v9 combines both into the checked and defaultChecked props.

Fluent UI v9 also provide the CheckboxShim as a bridge component of v8 and v9, which means you can keeps the v8 props and get a v9 Checkbox rendered in your UI.

** Note **: CheckboxShim is not a part of the @fluentui/react-component package, it is a part of the @fluentui/react-migration-v8-v9s package. It's consideral to use CheckboxShim only for temperary migration purpose, and use Checkbox directly for new development.

Examples

Basic Migration

Basic usage of Checkbox v8

import React from 'react';
import { Checkbox } from '@fluentui/react';

const CheckboxV8BasicExample = () => {
  return (
    <>
      <Checkbox checked label="Checked" />
      <Checkbox disabled label="Disabled" />
      <Checkbox indeterminate={true} label="Indeterminate" />
    </>
  );
};

An equivalent Checkbox in v9 is

import * as React from 'react';
import { Checkbox } from '@fluentui/react-components';

const CheckboxV9BasicExample = () => {
  return (
    <>
      <Checkbox checked label="Checked" />
      <Checkbox disabled label="Disabled" />
      <Checkbox checked="mixed" label="Mixed" />
    </>
  );
};

Usage of CheckboxShim in migration v8 to v9 is

import * as React from 'react';
import { CheckboxShim as Checkbox } from '@fluentui/react-migration-v8-v9';

const CheckboxShimBasicExample = () => {
  return (
    <>
      <Checkbox checked label="Checked" />
      <Checkbox disabled label="Disabled" />
      <Checkbox indeterminate={true} label="Indeterminate" />
    </>
  );
};

Prop Mapping

This table maps Checkbox v8 props to the Checkbox v9 equivalent and CheckboxShim.