diff --git a/.changeset/fix-inputBase.md b/.changeset/fix-inputBase.md
new file mode 100644
index 000000000..768e317df
--- /dev/null
+++ b/.changeset/fix-inputBase.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Input Base): Fixed case where default value of `0` did not render the default value in the input field.
diff --git a/packages/react-magma-dom/src/components/Input/Input.test.js b/packages/react-magma-dom/src/components/Input/Input.test.js
index 0bb71a1e2..4a09d7f78 100644
--- a/packages/react-magma-dom/src/components/Input/Input.test.js
+++ b/packages/react-magma-dom/src/components/Input/Input.test.js
@@ -244,6 +244,26 @@ describe('Input', () => {
expect(getByLabelText(iconAriaLabel)).toBeDisabled();
});
+ it('should initially render with value of `defaultValue` if no `value` provided', () => {
+ const labelText = 'test label';
+ const defaultValue = 'defaultValue';
+ const { getByLabelText } = render(
+
+ );
+
+ expect(getByLabelText(labelText)).toHaveAttribute('value', defaultValue);
+ });
+
+ it('should render with value "0" when `defaultValue` is 0', () => {
+ const labelText = 'test label';
+ const defaultValue = 0;
+ const { getByLabelText } = render(
+
+ );
+
+ expect(getByLabelText(labelText)).toHaveAttribute('value', '0');
+ });
+
it('should render an input with a value passed through', () => {
const labelText = 'test label';
const value = 'Test Value';
diff --git a/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx b/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx
index d4346237e..3642d8ecf 100644
--- a/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx
+++ b/packages/react-magma-dom/src/components/InputBase/InputBase.stories.tsx
@@ -46,6 +46,11 @@ export const Default = args => {
labelText="Input"
isClearable
/>
+
{
isClearable
isInverse
/>
+
(
const [value, setValue] = React.useState<
string | ReadonlyArray | number
- >(props.defaultValue || props.value || '');
+ >(
+ props.defaultValue !== undefined &&
+ props.defaultValue !== null
+ ? props.defaultValue
+ : props.value || ''
+ );
const maxLengthNum = !hasCharacterCounter && maxLength ? maxLength : undefined;
@@ -654,7 +659,7 @@ export const InputBase = React.forwardRef(
)}
- {isClearable && value && (
+ {isClearable && value !== '' && (