> ## Documentation Index
> Fetch the complete documentation index at: https://quickoinfosoftprivatelimited.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# HRA Calculator

> Calculate HRA exemption based on your salary to optimize your tax savings.

The HRA (House Rent Allowance) Calculator helps employees determine the tax-exempt portion of their HRA, enabling them to optimize their tax savings legally.

## Features

> **Instant Calculation**
>
> Get results immediately as users enter their salary details.

> **Metro/Non-Metro Support**
>
> Automatically applies the correct percentage based on city type.

> **Detailed Breakdown**
>
> Shows all three components so users understand the calculation.

> **Copy Results**
>
> Users can easily copy the results for their records.

## Integration

### Web (iframe)

```html theme={null}
<iframe
  src="https://tools.quicko.com/hra-calculator"
  width="100%"
  height="500"
  frameborder="0"
  allow="clipboard-write"
></iframe>
```

With customization:

```html theme={null}
<iframe
  id="hra-calculator"
  width="100%"
  height="500"
  frameborder="0"
  allow="clipboard-write"
></iframe>

<script>
  const theme = {
    mode: "dark",
    seed: "#006AD4"
  };
  
  const base64Theme = btoa(encodeURIComponent(JSON.stringify(theme)));
  document.getElementById('hra-calculator').src = 
    `https://tools.quicko.com/hra-calculator?theme=${encodedOptions}`;
</script>
```

### Mobile (WebView)

**iOS (Swift)**

```swift theme={null}
import WebKit

let theme: [String: Any] = [
    "mode": "light",
    "seed": "#006AD4"
]

if let jsonData = try? JSONSerialization.data(withJSONObject: theme),
   let base64Theme = jsonData.base64EncodedString()
        .addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) {
    let toolUrl = "https://tools.quicko.com/hra-calculator?theme=\(base64Theme)"
    webView.load(URLRequest(url: URL(string: toolUrl)!))
}
```

**Android (Kotlin)**

```kotlin theme={null}
import android.util.Base64
import org.json.JSONObject

val theme = JSONObject().apply {
    put("mode", "light")
    put("seed", "#006AD4")
}

val base64Theme = Base64.encodeToString(
    theme.toString().toByteArray(Charsets.UTF_8),
    Base64.NO_WRAP
)
val toolUrl = "https://tools.quicko.com/hra-calculator?theme=$base64Theme"
webView.loadUrl(toolUrl)
```

**Flutter**

```dart theme={null}
import 'dart:convert';

final theme = {'mode': 'light', 'seed': '#006AD4'};
final base64Theme = base64Encode(utf8.encode(jsonEncode(theme)));
final toolUrl = 'https://tools.quicko.com/hra-calculator?theme=$base64Theme';

controller.loadRequest(Uri.parse(toolUrl));
```

**React Native**

```jsx theme={null}
import { Buffer } from 'buffer';

const theme = { mode: 'light', seed: '#006AD4' };
const base64Theme = Buffer.from(JSON.stringify(theme)).toString('base64');
const toolUrl = `https://tools.quicko.com/hra-calculator?theme=${base64Theme}`;

<WebView source={{ uri: toolUrl }} />
```

## Input Fields

The HRA Calculator collects the following information:

| Field | Description | Required |
| - | - | - |
| Basic Salary | Basic salary amount | Yes |
| HRA Received | HRA component in salary | Yes |
| Rent Paid | Rent paid for accommodation | Yes |
| Metro City | Whether the city is a metro (Mumbai, Delhi, Chennai, Kolkata) | Yes |

## Output

The calculator displays:

* **Exempt HRA Amount** – The tax-exempt portion of HRA
* **Taxable HRA Amount** – The portion that will be taxed
* **Breakdown** – All three calculation components for transparency

***

## Use Cases

> **Content & Tax Guidance Websites**
>
> Enhance tax-related articles and guides by embedding an interactive HRA calculator.

> **Tax Filing Platforms**
>
> Pre-calculate HRA exemption to streamline the tax filing process.

> **HR & Payroll Systems**
>
> Provide employees with a tool to understand their salary components.

***

## Demo

[HRA Calculator](https://tools.quicko.com/hra-calculator)

[HRA Calculator](https://tools.quicko.com/hra-calculator?theme=ewoibW9kZSI6ImRhcmsiCn0)

Powered by

![Quicko](https://cdn.brandfetch.io/id6OWxavk2/theme/dark/idpHm6Kke3.svg?c=1bxid64Mup7aczewSAYMX\&t=1765534843947)

***

## Related

> **[Integration Guide](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/integration/index.md)**
>
> Learn how to embed this tool in your platform.

> **[Customization Options](https://quickoinfosoftprivatelimited.mintlify.site/projects/tools/options/index.md)**
>
> Match the tool's appearance to your brand.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.