diff --git a/src/Input.tsx b/src/Input.tsx
index fe8dc65..c34dd96 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLInputElement> {
+interface Props extends React.ComponentPropsWithRef<'input'> {
   /**
    * Defines the color of the input
    */
diff --git a/src/Select.tsx b/src/Select.tsx
index 1de8464..0e037c4 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
+interface Props extends React.ComponentPropsWithRef<'select'> {
   /**
    * Defines the color of the select
    */
diff --git a/src/Textarea.tsx b/src/Textarea.tsx
index fc5a83f..0aa636c 100644
--- a/src/Textarea.tsx
+++ b/src/Textarea.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+interface Props extends React.ComponentPropsWithRef<'textarea'> {
   /**
    * Defines the color of the textarea
    */
diff --git a/src/__tests__/Input.test.tsx b/src/__tests__/Input.test.tsx
index 8d4f8f3..330fea0 100644
--- a/src/__tests__/Input.test.tsx
+++ b/src/__tests__/Input.test.tsx
@@ -65,4 +65,10 @@ describe('Input', () => {
       expected
     )
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(<Input name="test-name" />)
+
+    expect(wrapper.find('input[name="test-name"]').getDOMNode().getAttribute('name')).toBeDefined()
+  })
 })
diff --git a/src/__tests__/Select.test.tsx b/src/__tests__/Select.test.tsx
index 64fbb07..076d9c3 100644
--- a/src/__tests__/Select.test.tsx
+++ b/src/__tests__/Select.test.tsx
@@ -74,4 +74,14 @@ describe('Select', () => {
 
     expect(wrapper.find('select').children()).toHaveLength(expected)
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(
+      <Select name="test-name">
+        <option value="lorem">Lorem</option>
+      </Select>
+    )
+
+    expect(wrapper.find('select[name="test-name"]').getDOMNode().getAttribute('name')).toBeDefined()
+  })
 })
diff --git a/src/__tests__/Textarea.test.tsx b/src/__tests__/Textarea.test.tsx
index 1945dc3..c41896e 100644
--- a/src/__tests__/Textarea.test.tsx
+++ b/src/__tests__/Textarea.test.tsx
@@ -44,4 +44,12 @@ describe('Textarea', () => {
 
     expect(wrapper.find('textarea').getDOMNode().getAttribute('class')).toContain(expected)
   })
+
+  it('should contain name attribute', () => {
+    const wrapper = mount(<Textarea name="test-name" />)
+
+    expect(wrapper.find('textarea[name="test-name"]').getDOMNode().getAttribute('name')).toBe(
+      'test-name'
+    )
+  })
 })