diff --git a/docs/lib/examples/CustomControls.js b/docs/lib/examples/CustomControls.js
index 9e3dce4fc..fc45de0ea 100644
--- a/docs/lib/examples/CustomControls.js
+++ b/docs/lib/examples/CustomControls.js
@@ -11,6 +11,7 @@ export default class Example extends React.Component {
             <CustomInput type="checkbox" id="exampleCustomCheckbox" label="Check this custom checkbox" />
             <CustomInput type="checkbox" id="exampleCustomCheckbox2" label="Or this one" />
             <CustomInput type="checkbox" id="exampleCustomCheckbox3" label="But not this disabled one" disabled />
+            <CustomInput type="checkbox" id="exampleCustomCheckbox4" label="Can't click this label to check!" htmlFor="exampleCustomCheckbox4_X" disabled />
           </div>
         </FormGroup>
         <FormGroup>
@@ -19,6 +20,7 @@ export default class Example extends React.Component {
             <CustomInput type="radio" id="exampleCustomRadio" name="customRadio" label="Select this custom radio" />
             <CustomInput type="radio" id="exampleCustomRadio2" name="customRadio" label="Or this one" />
             <CustomInput type="radio" id="exampleCustomRadio3" label="But not this disabled one" disabled />
+            <CustomInput type="radio" id="exampleCustomRadio4" label="Can't click this label to select!" htmlFor="exampleCustomRadio4_X" disabled />
           </div>
         </FormGroup>
         <FormGroup>
@@ -27,6 +29,7 @@ export default class Example extends React.Component {
             <CustomInput type="switch" id="exampleCustomSwitch" name="customSwitch" label="Turn on this custom switch" />
             <CustomInput type="switch" id="exampleCustomSwitch2" name="customSwitch" label="Or this one" />
             <CustomInput type="switch" id="exampleCustomSwitch3" label="But not this disabled one" disabled />
+            <CustomInput type="switch" id="exampleCustomSwitch4" label="Can't click this label to turn on!" htmlFor="exampleCustomSwitch4_X" disabled />
           </div>
         </FormGroup>
         <FormGroup>
diff --git a/src/CustomInput.js b/src/CustomInput.js
index a885d366b..b48239d48 100644
--- a/src/CustomInput.js
+++ b/src/CustomInput.js
@@ -12,6 +12,7 @@ const propTypes = {
   valid: PropTypes.bool,
   invalid: PropTypes.bool,
   bsSize: PropTypes.string,
+  htmlFor: PropTypes.string,
   cssModule: PropTypes.object,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]),
   innerRef: PropTypes.oneOfType([
@@ -32,6 +33,7 @@ function CustomInput(props) {
     children,
     bsSize,
     innerRef,
+    htmlFor,
     ...attributes
   } = props;
 
@@ -48,6 +50,8 @@ function CustomInput(props) {
     valid && 'is-valid',
   ), cssModule);
 
+  const labelHtmlFor = htmlFor || attributes.id;
+
   if (type === 'select') {
     return <select {...attributes} ref={innerRef} className={classNames(validationClassNames, customClass)}>{children}</select>;
   }
@@ -56,7 +60,7 @@ function CustomInput(props) {
     return (
       <div className={customClass}>
         <input {...attributes} ref={innerRef} className={classNames(validationClassNames, mapToCssModules('custom-file-input', cssModule))} />
-        <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={attributes.id}>{label || 'Choose file'}</label>
+        <label className={mapToCssModules('custom-file-label', cssModule)} htmlFor={labelHtmlFor}>{label || 'Choose file'}</label>
       </div>
     );
   }
@@ -81,7 +85,7 @@ function CustomInput(props) {
         ref={innerRef}
         className={classNames(validationClassNames, mapToCssModules('custom-control-input', cssModule))}
       />
-      <label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={attributes.id}>{label}</label>
+      <label className={mapToCssModules('custom-control-label', cssModule)} htmlFor={labelHtmlFor}>{label}</label>
       {children}
     </div>
   );
diff --git a/src/__tests__/CustomInput.spec.js b/src/__tests__/CustomInput.spec.js
index 5308b6b24..21666223d 100644
--- a/src/__tests__/CustomInput.spec.js
+++ b/src/__tests__/CustomInput.spec.js
@@ -25,6 +25,12 @@ describe('Custom Inputs', () => {
       expect(checkbox.find('label').prop('htmlFor')).toBe('yo');
     });
 
+    it('should pass id to both the input and label nodes, with an overriden for on the label node', () => {
+      const checkbox = mount(<CustomInput type="checkbox" htmlFor="custom-for" id="yo" />);
+      expect(checkbox.find('input').prop('id')).toBe('yo');
+      expect(checkbox.find('label').prop('htmlFor')).toBe('custom-for');
+    });
+
     it('should pass classNames to the outer div', () => {
       const checkbox = mount(<CustomInput type="checkbox" className="yo" />);
       expect(checkbox.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
@@ -85,6 +91,12 @@ describe('Custom Inputs', () => {
       expect(radio.find('label').prop('htmlFor')).toBe('yo');
     });
 
+    it('should pass id to both the input and label nodes, with an overriden for on the label node', () => {
+      const radio = mount(<CustomInput type="radio" htmlFor="custom-for" id="yo" />);
+      expect(radio.find('input').prop('id')).toBe('yo');
+      expect(radio.find('label').prop('htmlFor')).toBe('custom-for');
+    });
+
     it('should pass classNames to the outer div', () => {
       const radio = mount(<CustomInput type="radio" className="yo" />);
       expect(radio.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
@@ -125,6 +137,12 @@ describe('Custom Inputs', () => {
       expect(checkbox.find('label').prop('htmlFor')).toBe('yo');
     });
 
+    it('should pass id to both the input and label nodes, with an overriden for on the label node', () => {
+      const checkbox = mount(<CustomInput type="switch" htmlFor="custom-for" id="yo" />);
+      expect(checkbox.find('input').prop('id')).toBe('yo');
+      expect(checkbox.find('label').prop('htmlFor')).toBe('custom-for');
+    });
+
     it('should pass classNames to the outer div', () => {
       const checkbox = mount(<CustomInput type="switch" className="yo" />);
       expect(checkbox.find('.custom-control').prop('className').indexOf('yo') > -1).toBeTruthy();
@@ -219,6 +237,12 @@ describe('Custom Inputs', () => {
       expect(file.find('label').prop('htmlFor')).toBe('yo');
     });
 
+    it('should pass id to both the input and label nodes, with an overriden for on the label node', () => {
+      const file = mount(<CustomInput type="file" htmlFor="custom-for" id="yo" />);
+      expect(file.find('input').prop('id')).toBe('yo');
+      expect(file.find('label').prop('htmlFor')).toBe('custom-for');
+    });
+
     it('should pass classNames to the outer div', () => {
       const file = mount(<CustomInput type="file" className="yo" />);
       expect(file.find('.custom-file').prop('className').indexOf('yo') > -1).toBeTruthy();