Checkbox: add indeterminate state.

docs/src/examples/components/Checkbox/States/CheckboxExampleIndeterminate.shorthand.tsx

@@ -0,0 +1,12 @@
+import { Checkbox } from '@fluentui/react'
+import * as React from 'react'
+
+const CheckboxExampleIndeterminate = () => {
+  return (
+    <>
+      <Checkbox indeterminate={true} label="Indeterminate Checked" />
+    </>
+  )
+}
+
+export default CheckboxExampleIndeterminate

docs/src/examples/components/Checkbox/States/index.tsx

@@ -15,6 +15,11 @@ const States = () => (
       description="A checkbox can be read-only and unable to change states."
       examplePath="components/Checkbox/States/CheckboxExampleDisabled"
     />
+    <ComponentExample
+      title="Indeterminate"
+      description="A checkbox can be indeterminate."
+      examplePath="components/Checkbox/States/CheckboxExampleIndeterminate"
+    />
   </ExampleSection>
 )
 

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -33,6 +33,12 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
   /** A checkbox's checked state can be controlled. */
   checked?: SupportedIntrinsicInputProps['checked']
 
+  /** A checkbox can be indetermiante by default - uncontrolled state. */
+  defaultIndeterminate?: SupportedIntrinsicInputProps['defaultIndeterminate']
+
+  /** A checkbox's indeterminate state can be controlled. */
+  indeterminate?: SupportedIntrinsicInputProps['indeterminate']
+
   /** A checkbox can appear disabled and be unable to change states. */
   disabled?: SupportedIntrinsicInputProps['disabled']
 
@@ -65,6 +71,7 @@ export interface CheckboxProps extends UIComponentProps, ChildrenComponentProps
 
 export interface CheckboxState {
   checked: CheckboxProps['checked']
+  indeterminate: CheckboxProps['indeterminate']
 }
 
 class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, CheckboxState> {
@@ -82,8 +89,10 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
     }),
     checked: PropTypes.bool,
     defaultChecked: PropTypes.bool,
+    defaultIndeterminate: PropTypes.bool,
     disabled: PropTypes.bool,
     icon: customPropTypes.itemShorthandWithoutJSX,
+    indeterminate: customPropTypes.itemShorthandWithoutJSX,
     label: customPropTypes.itemShorthand,
     labelPosition: PropTypes.oneOf(['start', 'end']),
     onChange: PropTypes.func,
@@ -107,30 +116,32 @@ class Checkbox extends AutoControlledComponent<WithAsProp<CheckboxProps>, Checkb
   }
 
   getInitialAutoControlledState(): CheckboxState {
-    return { checked: false }
+    return { checked: false, indeterminate: false }
   }
 
   handleChange = (e: React.ChangeEvent) => {
     // Checkbox component doesn't present any `input` component in markup, however all of our
     // components should handle events transparently.
-    const { disabled } = this.props
+    const { disabled, indeterminate } = this.props
     const checked = !this.state.checked
+    const isIndeterminate = !this.state.indeterminate
 
     if (!disabled) {
-      this.setState({ checked })
-      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
+      this.setState({ checked, indeterminate })
+      _.invoke(this.props, 'onChange', e, { ...this.props, checked, isIndeterminate })
     }
   }
 
   handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
-    const { disabled } = this.props
+    const { disabled, indeterminate } = this.props
     const checked = !this.state.checked
+    const isIndeterminate = !this.state.indeterminate
 
     if (!disabled) {
-      this.setState({ checked })
+      this.setState({ checked, indeterminate })
 
-      _.invoke(this.props, 'onClick', e, { ...this.props, checked })
-      _.invoke(this.props, 'onChange', e, { ...this.props, checked })
+      _.invoke(this.props, 'onClick', e, { ...this.props, checked, isIndeterminate })
+      _.invoke(this.props, 'onChange', e, { ...this.props, checked, isIndeterminate })
     }
   }
 

packages/react/src/utils/htmlPropsUtils.tsx

@@ -55,9 +55,11 @@ export type HtmlInputAttrs =
   | 'autoCorrect'
   | 'autoFocus'
   | 'checked'
+  | 'defaultIndeterminate'
   | 'disabled'
   | 'form'
   | 'id'
+  | 'indeterminate'
   | 'list'
   | 'max'
   | 'maxLength'
@@ -92,9 +94,11 @@ export const htmlInputAttrs: HtmlInputAttrs[] = [
   'autoCorrect',
   'autoFocus',
   'checked',
+  'defaultIndeterminate',
   'disabled',
   'form',
   'id',
+  'indeterminate',
   'list',
   'max',
   'maxLength',