fix(checkbox): enable name attribute (#678)

material-components · Feb 19, 2019 · 2c77ab5 · 2c77ab5
1 parent 9f93ef3
commit 2c77ab5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/checkbox/index.tsx b/packages/checkbox/index.tsx
@@ -33,6 +33,7 @@ export interface CheckboxProps extends Ripple.InjectedProps<HTMLDivElement, HTML
   className?: string;
   disabled?: boolean;
   indeterminate?: boolean;
+  name?: string;
   nativeControlId?: string;
   onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
   initRipple: (surface: HTMLDivElement, activator?: HTMLInputElement) => void;
@@ -171,6 +172,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       /* eslint-enable no-unused-vars */
       disabled,
       nativeControlId,
+      name,
       ...otherProps
     } = this.props;
 
@@ -186,6 +188,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
           checked={this.state.checked}
           disabled={disabled}
           aria-checked={this.state['aria-checked']}
+          name={name}
           onChange={this.onChange}
           rippleActivatorRef={this.inputElement}
         />

diff --git a/test/unit/checkbox/index.test.tsx b/test/unit/checkbox/index.test.tsx
@@ -134,6 +134,11 @@ test('passes nativeControlId to NativeControl through props', () => {
   assert.equal(wrapper.childAt(0).props().id, 'test-id');
 });
 
+test('passes name to NativeControl through props', () => {
+  const wrapper = shallow(<Checkbox name='test-name' />);
+  assert.equal(wrapper.childAt(0).props().name, 'test-name');
+});
+
 test('calls foundation.handleChange in native control props.onChange', () => {
   const wrapper = shallow<Checkbox>(<Checkbox />);
   const nativeControl = wrapper.childAt(0);