> ## Documentation Index
> Fetch the complete documentation index at: https://developer.quicko.com/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.

export const Iframe = ({lightUrl, darkUrl, title, height = 900, className = ""}) => {
  const resolvedHeight = typeof height === "number" ? `${height}px` : height;
  return <div className="w-full overflow-hidden">
      {}
      <div className="w-full">
        {}
        <iframe src={lightUrl} title={title} className={`block w-full border-0 dark:hidden ${className}`} style={{
    height: resolvedHeight
  }} allow="clipboard-write" />

        {}
        <iframe src={darkUrl} title={title} className={`hidden w-full border-0 dark:block ${className}`} style={{
    height: resolvedHeight
  }} allow="clipboard-write" />
      </div>

      {}
      <div onClick={() => window.open("https://quicko.com", "_blank", "noopener,noreferrer")} className="
        flex items-center justify-center gap-2
        h-14 px-2
        border-x border-b
        border-[#c6c5d0] dark:border-[#313b4a]
        bg-[#f6f7f8] dark:bg-[#1c1c1f]
        cursor-pointer
        rounded-b-md
      ">
        <span className="text-sm leading-none dark:text-zinc-400">
          Powered by
        </span>
        <img src="https://cdn.brandfetch.io/id6OWxavk2/theme/dark/idpHm6Kke3.svg?c=1bxid64Mup7aczewSAYMX&amp;t=1765534843947" alt="Quicko" className="h-4 object-contain" />
      </div>
    </div>;
};

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

<Columns cols={2}>
  <Card title="Instant Calculation" icon="zap">
    Get results immediately as users enter their salary details.
  </Card>

  <Card title="Metro/Non-Metro Support" icon="building">
    Automatically applies the correct percentage based on city type.
  </Card>

  <Card title="Detailed Breakdown" icon="list">
    Shows all three components so users understand the calculation.
  </Card>

  <Card title="Copy Results" icon="clipboard">
    Users can easily copy the results for their records.
  </Card>
</Columns>

## 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)

<Tabs>
  <Tab title="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)!))
    }
    ```
  </Tab>

  <Tab title="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)
    ```
  </Tab>

  <Tab title="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));
    ```
  </Tab>

  <Tab title="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 }} />
    ```
  </Tab>
</Tabs>

## 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

<AccordionGroup>
  <Accordion title="Content & Tax Guidance Websites" icon="book-open" defaultOpen>
    Enhance tax-related articles and guides by embedding an interactive HRA calculator.
  </Accordion>

  <Accordion title="Tax Filing Platforms" icon="file-text">
    Pre-calculate HRA exemption to streamline the tax filing process.
  </Accordion>

  <Accordion title="HR & Payroll Systems" icon="users">
    Provide employees with a tool to understand their salary components.
  </Accordion>
</AccordionGroup>

***

## Demo

<Iframe title="HRA Calculator" lightUrl="https://tools.quicko.com/hra-calculator" darkUrl="https://tools.quicko.com/hra-calculator?theme=ewoibW9kZSI6ImRhcmsiCn0" height={582} className="rounded-l" />

***

## Related

<Columns cols={2}>
  <Card title="Integration Guide" icon="code" href="/projects/tools/integration/index">
    Learn how to embed this tool in your platform.
  </Card>

  <Card title="Customization Options" icon="settings" href="/projects/tools/options/index">
    Match the tool's appearance to your brand.
  </Card>
</Columns>