> Markdown version of [Visibility](https://vaadin.com/docs/next/flow/component-internals/visibility). Section index: [llms.txt](https://vaadin.com/docs/next/flow/llms.txt)

# Component Visibility

Invisible components are no longer displayed in the UI, nor do they receive updates from the client side. You make a component invisible by calling `Component.setVisible(false)`. Transmission of server-side updates resumes when you make the component visible again.

> **Tip:** When visibility follows application state — for example, showing a **Done** button only while a row is being edited — bind it to a signal with `Component.bindVisible()` rather than calling `setVisible()` from listeners. See [Binding Visibility to a Signal](#binding-visibility-to-a-signal).

Example 1. Making a component invisible, and visible again

```java
Span label = new Span("My label");
label.setVisible(false);
// this isn't transmitted to the client side
label.setText("Changed my label");

Button makeVisible = new Button("Make visible", evt -> {
    // makes the label visible - only now is the
    // "Changed my label" text transmitted
    label.setVisible(true);
});
```

If you make a container with child components invisible (e.g., a `Div` or `Vertical/HorizontalLayout`), the child components are also made invisible. No server-side updates are sent to them, and no client updates are received from them. When the container becomes visible again, updates to the children also resume.

## <a id="hiding-before-rendering"></a>Hiding before Rendering

If you make a component invisible before it’s rendered for the first time, the corresponding element in the DOM won’t be created. However, the component still exists on the server-side. When you make the component visible again, the corresponding DOM element is created.

Example 2. Making a component invisible before it’s rendered

```java
Span label = new Span("My label");
label.setVisible(false);

Div container = new Div();
// the label isn't transmitted to the client side.
// The corresponding element is created in the
// DOM only when it becomes visible.
container.add(label);

// prints 1 - the server-side structure is preserved
// regardless of whether the component is visible or not
System.out.println("Number of children: " + container.getChildCount());
```

## <a id="hiding-after-rendering"></a>Hiding after Rendering

If you make an already rendered component invisible, the corresponding element is not removed from the DOM. Instead, it is marked with the `hidden` attribute. Furthermore, the element won’t receive any updates from the server. Likewise, the server will ignore any RPCs (Remote Procedure Calls) made from the element.

## <a id="binding-visibility-to-a-signal"></a>Binding Visibility to a Signal (since V25.1)

Calling `setVisible()` from event listeners works, but every place that changes the underlying state has to remember to update the component. When visibility follows a piece of application state, bind the component to a signal with `Component.bindVisible()` and let the framework keep the two synchronized.

Example 3. Showing a button only while editing

```java
import com.vaadin.flow.signals.local.ValueSignal;

ValueSignal<Boolean> editing = new ValueSignal<>(false);

Button done = new Button("Done");
done.bindVisible(editing);
// The button is hidden until "editing" becomes true

Button edit = new Button("Edit", evt -> editing.set(true));
// Clicking Edit makes the Done button appear -
// no setVisible() call needed
```

The bound signal can also be a condition computed from other signals, which lets a component react to several pieces of state at once:

Example 4. Deriving visibility from several signals

```java
ValueSignal<Boolean> formDirty = new ValueSignal<>(false);
ValueSignal<Boolean> submitting = new ValueSignal<>(false);

Button save = new Button("Save");
save.bindVisible(() -> formDirty.get() && !submitting.get());
// Visible only while there are unsaved changes
// and no submission is in progress
```

While a signal is bound to a component’s visibility, calling `setVisible()` on that component throws a `BindingActiveException`. Pass `null` to `bindVisible()` to remove the binding if you need to control visibility manually again.

Bound components hide the same way as components hidden with `setVisible()`, so [Hiding before Rendering](#hiding-before-rendering) and [Hiding after Rendering](#hiding-after-rendering) apply to them as well.

For the full set of binding methods — text, enabled state, form field values, CSS class names, and more — see [Binding Visibility](https://vaadin.com/docs/next/flow/ui-state/building-ui.md#binding-visibility) in Component Bindings. For a worked progressive-disclosure form, see [Conditional Visibility](https://vaadin.com/docs/next/flow/ui-state/usage-examples/conditional-visibility.md).