diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 963db30392..a303960e7c 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -9,6 +9,7 @@ import {
customPropTypes,
getElementType,
getUnhandledProps,
+ htmlInputAttrs,
makeDebugger,
META,
partitionHTMLInputProps,
@@ -216,7 +217,8 @@ export default class Checkbox extends Component {
)
const unhandled = getUnhandledProps(Checkbox, this.props)
const ElementType = getElementType(Checkbox, this.props)
- const [htmlInputProps, rest] = partitionHTMLInputProps(unhandled, { htmlProps: [] })
+ const [htmlInputProps, rest] = partitionHTMLInputProps(unhandled, { htmlProps: htmlInputAttrs })
+ const id = _.get(htmlInputProps, 'id')
return (
}
+ {createHTMLLabel(label, { defaultProps: { htmlFor: id } }) || }
)
}
diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js
index 52de4ed708..275f8b3d31 100644
--- a/test/specs/modules/Checkbox/Checkbox-test.js
+++ b/test/specs/modules/Checkbox/Checkbox-test.js
@@ -1,5 +1,7 @@
+import _ from 'lodash'
import React from 'react'
+import { htmlInputAttrs } from 'src/lib'
import Checkbox from 'src/modules/Checkbox/Checkbox'
import * as common from 'test/specs/commonTests'
import { sandbox } from 'test/utils'
@@ -141,6 +143,39 @@ describe('Checkbox', () => {
})
})
+ describe('id', () => {
+ it('passes value to the input', () => {
+ shallow()
+ .find('input')
+ .should.have.prop('id', 'foo')
+ })
+
+ it('adds htmlFor prop to the label', () => {
+ shallow()
+ .find('label')
+ .should.have.prop('htmlFor', 'foo')
+ })
+
+ it('adds htmlFor prop to the label when it is empty', () => {
+ shallow()
+ .find('label')
+ .should.have.prop('htmlFor', 'foo')
+ })
+ })
+
+ describe('input', () => {
+ // Heads up! Input handles some of html props
+ const props = _.without(htmlInputAttrs, 'defaultChecked', 'disabled')
+
+ _.forEach(props, (propName) => {
+ it(`passes "${propName}" to the input`, () => {
+ shallow()
+ .find('input')
+ .should.have.prop(propName)
+ })
+ })
+ })
+
describe('label', () => {
it('adds the "fitted" class when not present', () => {
shallow()