> For the complete documentation index, see [llms.txt](https://docs.kasko.io/kasko-frontend-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kasko.io/kasko-frontend-documentation/core-concepts/visibility-condition.md).

# Toggling visibility of components

Often it is necessary to show/hide a component based on some customer's input. This can be achieved with `visibility_condition`.

Visibility condition is using [JsonLogic](/kasko-frontend-documentation/guides/jsonlogic.md). The available variables within it are `input`, `flags`, and all other [JsonLogic namespaces](/kasko-frontend-documentation/guides/jsonlogic.md). The `input` variable will contain all of the customer input. For example, `input.first_name` contains the value of `first_name` field.

## Available Flags

The `flags` namespace contains system-defined attributes. **Important**: `flags` is a top-level namespace, NOT under `input`.

```js
// Correct
{"var": "flags.editing"}

// Wrong
{"var": "input.flags.editing"}
```

### Common Flags

| Flag               | Type    | Description                                                       |
| ------------------ | ------- | ----------------------------------------------------------------- |
| `editing`          | boolean | Set to `true` when the "edit" button is clicked in summary screen |
| `quote_loaded`     | boolean | Quote request has completed successfully                          |
| `is_knockout`      | boolean | Knockout flow has been triggered (quote returned 422)             |
| `is_lead`          | boolean | Customer is entering the application as a lead                    |
| `is_prefilling`    | boolean | Customer is entering with data prefilled                          |
| `active_items`     | integer | Count of active items                                             |
| `offer_accepted`   | boolean | Offer flow has been accepted                                      |
| `is_dashboard`     | boolean | Application is running in dashboard context                       |
| `policy_purchased` | boolean | Policy has been purchased                                         |

### Payment Flags

| Flag              | Type    | Description              |
| ----------------- | ------- | ------------------------ |
| `is_3d_secure`    | boolean | 3D Secure flow is active |
| `payment_back`    | boolean | Returned from payment    |
| `payment_tbd`     | boolean | Payment to be determined |
| `payment_fail`    | boolean | Payment has failed       |
| `payment_success` | boolean | Payment was successful   |

### Flow Flags

| Flag                        | Type    | Description                        |
| --------------------------- | ------- | ---------------------------------- |
| `is_policy_edit`            | boolean | Policy edit flow is active         |
| `is_mta`                    | boolean | Mid-term adjustment flow is active |
| `is_renewal`                | boolean | Renewal flow is active             |
| `is_recurring_payment_flow` | boolean | Recurring payment flow is active   |

### Lead Flags

| Flag                      | Type    | Description                        |
| ------------------------- | ------- | ---------------------------------- |
| `lead_token_exists`       | boolean | Lead token exists                  |
| `lead_token_valid`        | boolean | Lead token is valid                |
| `lead_retrieved`          | boolean | Lead data has been retrieved       |
| `sales_lead_token_exists` | boolean | Sales lead token exists            |
| `sales_lead_retrieved`    | boolean | Sales lead data has been retrieved |

### FNOL/Claims Flags

| Flag                     | Type    | Description                    |
| ------------------------ | ------- | ------------------------------ |
| `is_fnol_user_logged_in` | boolean | FNOL user is logged in         |
| `is_claim_edit`          | boolean | Claim edit flow is active      |
| `claim_draft_retrieved`  | boolean | Claim draft has been retrieved |

### Other Flags

| Flag                    | Type    | Description                  |
| ----------------------- | ------- | ---------------------------- |
| `can_update_offer`      | boolean | Offer can be updated         |
| `can_purchase_offer`    | boolean | Offer can be purchased       |
| `is_customer_logged_in` | boolean | Customer is logged in        |
| `is_quote_loading`      | boolean | Quote request is in progress |
| `is_admin`              | boolean | Admin mode is active         |
| `is_captcha_enabled`    | boolean | Captcha is enabled           |
| `skip_auth`             | boolean | Skip authentication          |
| `is_live_mode`          | boolean | Application is in live mode  |
| `ab_variant`            | string  | A/B test variant identifier  |

## Example visibility condition:

```json
{
  "type": "jsonlogic",
  "schema": {
    "if": [
      {
        "var": "input.data.module_enabled"
      },
      true,
      false
    ]
  }
}
```

## Editing Flow Pattern

When building screens before the summary, it's common to check if the user is in editing mode to redirect them back to summary:

```json
{
  "next": {
    "type": "jsonlogic",
    "schema": {
      "if": [
        {"===": [{"var": "flags.editing"}, true]},
        "summary",
        "next-screen"
      ]
    }
  }
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.kasko.io/kasko-frontend-documentation/core-concepts/visibility-condition.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.