Checkbox is more general

app/src/ui/changes/changed-file.tsx

@@ -4,7 +4,7 @@ import { FileStatus, mapStatus, iconForStatus } from '../../models/status'
 import { PathLabel } from '../lib/path-label'
 import { Octicon } from '../octicons'
 import { showContextualMenu } from '../main-process-proxy'
-import { Checkbox, CheckboxValue } from './checkbox'
+import { Checkbox, CheckboxValue } from '../lib/checkbox'
 
 interface IChangedFileProps {
   readonly path: string

app/src/ui/changes/changes-list.tsx

@@ -6,7 +6,7 @@ import { List, ClickSource } from '../list'
 import { WorkingDirectoryStatus } from '../../models/status'
 import { DiffSelectionType } from '../../models/diff'
 import { CommitIdentity } from '../../models/commit-identity'
-import { Checkbox, CheckboxValue } from './checkbox'
+import { Checkbox, CheckboxValue } from '../lib/checkbox'
 import { ICommitMessage } from '../../lib/app-state'
 import { IAutocompletionProvider } from '../autocompletion'
 import { Dispatcher } from '../../lib/dispatcher'

app/src/ui/lib/checkbox.tsx

@@ -9,12 +9,15 @@ export enum CheckboxValue {
 
 interface ICheckboxProps {
   /** The current value of the component. */
-  readonly value: CheckboxValue
+  readonly value?: CheckboxValue
 
   /** The function to call on value change. */
   readonly onChange?: (event: React.FormEvent<HTMLInputElement>) => void
 
+  /** The tab index of the input element. */
   readonly tabIndex?: number
+
+  readonly label?: string
 }
 
 /** A checkbox component which supports the mixed value. */
@@ -50,13 +53,16 @@ export class Checkbox extends React.Component<ICheckboxProps, void> {
 
   public render() {
     return (
-      <input
-        className='checkbox-component'
-        tabIndex={this.props.tabIndex}
-        type='checkbox'
-        onChange={this.onChange}
-        ref={this.onInputRef}
-      />
+      <label className='checkbox-component'>
+        <input
+          tabIndex={this.props.tabIndex}
+          type='checkbox'
+          onChange={this.onChange}
+          ref={this.onInputRef}
+        />
+
+        {this.props.label}
+      </label>
     )
   }
 }

app/styles/ui/_checkbox.scss

@@ -1,8 +1,13 @@
 .checkbox-component {
-  &:focus {
-    // Don't know why but on Windows this is necessary to
-    // not have a 1px gap around the checkbox on the right
-    // hand side. I'm guessing it's the same on mac?
-    outline-offset: -1px;
+  display: flex;
+  flex-direction: row;
+
+  input {
+    &:focus {
+      // Don't know why but on Windows this is necessary to
+      // not have a 1px gap around the checkbox on the right
+      // hand side. I'm guessing it's the same on mac?
+      outline-offset: -1px;
+    }
   }
 }