fix(input): allow input to work with hook form library

twilio-labs · Mar 9, 2021 · 14d3396 · 14d3396
1 parent be3643a
commit 14d3396
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/wise-mangos-appear.md b/.changeset/wise-mangos-appear.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/input': patch
+---
+
+Removed required from the `id` prop, so Input can be used as an uncontrolled component. This allows Input to be used with libraries like `React-Hook-Form`.
diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx
@@ -12,7 +12,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   disabled?: boolean;
   hasError?: boolean;
   height?: never;
-  id: string;
+  id?: string;
   insertAfter?: React.ReactNode;
   insertBefore?: React.ReactNode;
   name?: string;
@@ -137,7 +137,7 @@ if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     disabled: PropTypes.bool,
     hasError: PropTypes.bool,
-    id: PropTypes.string.isRequired,
+    id: PropTypes.string,
     name: PropTypes.string,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,