diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 4122186..dda9f12 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,11 +1,10 @@
 import React, { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
-export interface CheckboxProps {
+import ErrorMessage from './ErrorMessage'
+
+type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
   error?: string
-  name: string
   label: string
-  disabled?: boolean
-  className?: string
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
@@ -50,8 +49,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <div className="ml-2">
           <label htmlFor={name}>{label}</label>
         </div>
-        {/* {error} */}
       </div>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
     </>
   ),
 )
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index e954727..f75b17d 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -1,11 +1,8 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-interface ErrorMessageProps {
-  children: ReactNode
-}
-
-const ErrorMessage = ({ children }: ErrorMessageProps) => {
-  return <p className="mt-1 text-sm text-red-700">{children}</p>
+const ErrorMessage = ({ children, className }: React.HTMLAttributes<HTMLElement>) => {
+  return <p className={twMerge("mt-1 text-sm text-red-700", className)}>{children}</p>
 }
 
 export default ErrorMessage
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 2e56d4c..4df3fbe 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-export interface IconButtonProps {
+export interface IconButtonProps extends React.HtmlHTMLAttributes<HTMLButtonElement> {
   icon: ReactNode
 }
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 39026a0..ee7ce10 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,11 +1,9 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface InputProps {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
   error?: string
   label?: string
-  name: string
-  className?: string
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -13,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
             {label}
           </label>
         )}
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
deleted file mode 100644
index 5d9ef1d..0000000
--- a/src/components/Label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react'
-
-interface LabelProps {
-  children?: React.ReactNode
-}
-
-const Label = forwardRef<HTMLLabelElement, LabelProps>((props, ref) => (
-  <label
-    ref={ref}
-    {...props}
-    style={{
-      width: '100%',
-    }}
-  />
-))
-
-export default Label
diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
index 61591a1..e9d31f5 100644
--- a/src/components/MultiSelect.tsx
+++ b/src/components/MultiSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Select from 'react-select'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 export interface MultiSelectProps {
@@ -20,7 +21,7 @@ const MultiSelect = ({
 }: MultiSelectProps) => (
   <div className={className}>
     {label && (
-      <label className="font-semibold mb-1 block" htmlFor={name}>
+      <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
         {label}
       </label>
     )}
@@ -28,13 +29,14 @@ const MultiSelect = ({
       options={options}
       isMulti
       styles={{
-        control: (baseStyles) => ({
-          ...baseStyles,
+        control: () => ({
+          outline: '0',
+          transition: 'all 100ms',
+          borderStyle: 'solid',
+          boxSizing: 'border-box',
           borderRadius: '32px',
           minHeight: '36.5px',
-          borderWidth: '1px',
           boxShadow: 'none',
-          paddingLeft: '5px',
         }),
         indicatorSeparator: () => ({
           display: 'none',
@@ -52,17 +54,21 @@ const MultiSelect = ({
           '&:before': {
             content: '"✕"',
             fontSize: '80%',
-            padding: '0 6px 0 4px',
+            padding: '0 8px 0 4px',
           },
         }),
       }}
       classNames={{
-        control: (state) =>
-          state.isFocused
-            ? 'border-blue-500 hover:border-blue-500'
-            : 'border-grey-700 hover:border-gray-800',
+        control: (state) =>(
+          twMerge(
+            'flex flex-wrap cursor-default items-center relative border',
+            state.isFocused
+              ? 'border-blue-500 hover:border-blue-500'
+              : 'border-gray-600 hover:border-gray-800'
+          )
+        ),
         multiValue: () => 'bg-gray-300',
-        multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+        multiValueRemove: () => 'hover:cursor-pointer hover:text-red-700 self-center',
       }}
       {...props}
     />
diff --git a/src/components/MultiSelectCreatable.tsx b/src/components/MultiSelectCreatable.tsx
index 3572972..ab56fee 100644
--- a/src/components/MultiSelectCreatable.tsx
+++ b/src/components/MultiSelectCreatable.tsx
@@ -1,6 +1,7 @@
 import React, { FocusEvent, KeyboardEventHandler, useEffect } from 'react'
 import { MultiValue } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 interface Option {
@@ -64,7 +65,7 @@ const MultiSelectCreatable = ({
   return (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}
@@ -79,21 +80,26 @@ const MultiSelectCreatable = ({
         inputValue={inputValue}
         value={value}
         classNames={{
-          control: (state) =>
-            state.isFocused
-              ? 'border-blue-500 hover:border-blue-500'
-              : 'border-gray-600 hover:border-gray-800',
+          control: (state) =>(
+            twMerge(
+              'flex flex-wrap cursor-default items-center relative border',
+              state.isFocused
+                ? 'border-blue-500 hover:border-blue-500'
+                : 'border-gray-600 hover:border-gray-800'
+            )
+          ),
           multiValue: () => 'bg-gray-300',
-          multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+          multiValueRemove: () => 'hover:cursor-pointer hover:text-red-700 self-center',
         }}
         styles={{
-          control: (baseStyles) => ({
-            ...baseStyles,
+          control: () => ({
+            outline: '0',
+            transition: 'all 100ms',
+            borderStyle: 'solid',
+            boxSizing: 'border-box',
             borderRadius: '32px',
             minHeight: '36.5px',
-            borderWidth: '1px',
             boxShadow: 'none',
-            paddingLeft: '5px',
           }),
           indicatorSeparator: () => ({
             display: 'none',
@@ -111,7 +117,7 @@ const MultiSelectCreatable = ({
             '&:before': {
               content: '"✕"',
               fontSize: '80%',
-              padding: '0 6px 0 4px',
+              padding: '0 8px 0 4px',
             },
           }),
         }}
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index 6b52692..b284733 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,8 +1,7 @@
 import React, { forwardRef } from 'react'
 
-export interface RadioButtonProps extends React.HTMLProps<HTMLInputElement> {
-  label?: string
-  name: string
+type RadioButtonProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string
 }
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
index a0fd511..c57ee34 100644
--- a/src/components/RadioGroup.tsx
+++ b/src/components/RadioGroup.tsx
@@ -1,13 +1,8 @@
 import React, { ChangeEvent, Children, ReactNode, cloneElement } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-export interface RadioGroupProps {
-  children?: ReactNode
-  name?: string
-  value?: string
+type RadioGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
   flexDirection?: 'row' | 'column'
-  className?: string
-  onChange: (arg: string) => void
 }
 
 const RadioGroup = ({
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index ceb203e..552a762 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
-  label?: string
+type SelectProps = React.InputHTMLAttributes<HTMLSelectElement> & {
   error?: string
+  label?: string
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ label, name, className, error, ...props }, ref) => (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index e3a899d..a0e23d2 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -1,12 +1,9 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface TextareaProps {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   error?: string
-  fontSize?: number
   label?: string
-  name: string
-  className?: string
 }
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -14,7 +11,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
             {label}
           </label>
         )}
diff --git a/src/index.ts b/src/index.ts
index 2562d33..baa04d5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,5 @@
 export { default as Checkbox } from './components/Checkbox'
 export { default as Input } from './components/Input'
-export { default as Label } from './components/Label'
 export { default as LogoOONIRun } from './components/LogoOONIRun'
 export { default as Modal } from './components/Modal'
 export { default as MultiSelect } from './components/MultiSelect'