Add indeterminate checkboxes

src/Checkbox/Checkbox.js

@@ -15,6 +15,7 @@ type Props = {
   disabled?: boolean,
   /** ID for the checkbox */
   id?: string,
+  indeterminate?: boolean,
   /** Makes the checkbox required and sets aria-invalid to true */
   isRequired?: boolean,
   /** Checkbox label */
@@ -39,6 +40,7 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   id,
+  indeterminate,
   isRequired,
   label,
   onBlur,
@@ -62,6 +64,7 @@ const Checkbox = ({
       defaultChecked={defaultChecked}
       disabled={disabled}
       id={id}
+      indeterminate={indeterminate}
       onBlur={onBlur}
       onChange={onChange}
       onFocus={onFocus}
@@ -84,6 +87,7 @@ Checkbox.defaultProps = {
   defaultChecked: undefined,
   disabled: false,
   id: undefined,
+  indeterminate: false,
   isRequired: false,
   onBlur: undefined,
   onChange: undefined,

src/Checkbox/Checkbox.mdx

@@ -31,6 +31,12 @@ Make the checkbox disabled with the `disabled` prop.
   <Checkbox checked disabled label="Click me" />
 </Playground>
 
+## Indeterminate
+
+<Playground>
+  <Checkbox label="Click me" checked indeterminate />
+</Playground>
+
 ## States
 
 A checkbox can use different states (as per palette) such as `danger`, `success` and `warning`.

src/Checkbox/CheckboxField.js

@@ -19,6 +19,7 @@ type Props = {
   hint?: string | Element<any>,
   /** ID for the checkbox */
   id?: string,
+  indeterminate?: boolean,
   isFullWidth?: boolean,
   isOptional?: boolean,
   /** Makes the checkbox required and sets aria-invalid to true */
@@ -45,6 +46,7 @@ const CheckboxField = ({
   description,
   hint,
   label,
+  indeterminate,
   isFullWidth,
   isOptional,
   isRequired,
@@ -77,6 +79,7 @@ CheckboxField.defaultProps = {
   disabled: false,
   hint: undefined,
   id: undefined,
+  indeterminate: false,
   isFullWidth: false,
   isOptional: false,
   isRequired: false,

src/Checkbox/__tests__/Checkbox.test.js

@@ -13,6 +13,11 @@ it('renders correctly for a disabled checkbox', () => {
   expect(container.firstChild).toMatchSnapshot();
 });
 
+it('renders correctly for an indeterminate checkbox', () => {
+  const { container } = render(<Checkbox defaultChecked indeterminate />);
+  expect(container.firstChild).toMatchSnapshot();
+});
+
 describe('states', () => {
   ['danger', 'success', 'warning', 'primary'].forEach(state => {
     it(`renders correctly for an checkbox with state ${state}`, () => {