---
title: "Toggle layers (OCGs) visibility in a PDF via the UI | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/layers/built-in-ui/"
md_url: "https://www.nutrient.io/guides/web/layers/built-in-ui.md"
last_updated: "2026-06-08T17:11:05.605Z"
description: "Toggle PDF layer visibility using the built-in sidebar UI in Nutrient Web SDK. Control OCG layers with eye icons, lock states, and radio button groups in your JavaScript viewer."
---

# Toggle layer (OCG) Visibility in a PDF via the UI

This guide covers how to toggle the visibility of optional content group (OCG) layers via our user interface (UI).

Working with PDF layers (OCG layers) is available when using [Web SDK](https://www.nutrient.io/guides/web.md) in the browser. For more information, refer to the [operational mode](https://www.nutrient.io/guides/web/about/operational-modes.md) guide.








Nutrient Web SDK comes with an [OCG layers sidebar](https://www.nutrient.io/guides/web/user-interface/sidebar/layers.md) that allows the end user to control the state of the visibility of the OCG layers present in a document.

End users can control the visibility of the OCG layers using the icons rendered next to each layer in the sidebar.

## Toggling visibility

OCG layers have an open/closed eye button icon that indicates whether the OCG layer is visible or not, and it allows you to toggle their visibility. OCG layers with an open eye icon are currently visible, while those with a closed eye icon are hidden. End users can click the button icons to toggle the layer’s visibility.

OCG layers also have an open/closed lock icon that indicates whether the visibility of the OCG layer can be toggled by the user. OCG layers with a closed lock icon cannot have their visibility toggled, while those with an open lock can be toggled.

## Radio button groups

The radio group icons are assigned to a specific type of layers called `radioGroup`. `radioGroup` layers work like radio buttons: Only one layer of a radio group can be visible at the same time. The `radioGroup` layer with a checked radio button icon next to it is the one that’s currently visible.
---

## Related pages

- [Toggle layer (OCG) visibility in a PDF using JavaScript](/guides/web/layers/visibility.md)
- [Introduction to PDF layers (OCGs)](/guides/web/layers/introduction-to-ocg-layers.md)
- [JavaScript library for PDF layers (OCGs)](/guides/web/layers.md)