> Markdown version of [Basic Features](https://vaadin.com/docs/v23/create-ui/basic-features). Section index: [llms.txt](https://vaadin.com/docs/v23/create-ui/llms.txt)

# Basic Component Features

You can use the basic features listed below with all components that extend `com.vaadin.flow.component.Component`.

## <a id="id"></a>Id

You can set an `Id` for any component:

- The `Id` is transmitted to the client side as the `id` of the corresponding element.

- An `Id` must be unique within the page.

Ids can be used to select the element in JavaScript code or CSS rules, for example.

**Example**: Using the `setId()` method to set a component `Id`.

```java
component.setId("my-component");
```

## <a id="element"></a>Element

Every component is associated with a root `Element`.

You can use the `Element` to access low-level functionality using the `component.getElement()` method.

See [Element Properties and Attributes](https://vaadin.com/docs/v23/create-ui/element-api/properties-attributes.md) for more.

## <a id="visibility"></a>Visibility

You can set a component to invisible using the `component.setVisible(false)` method.

Invisible components:

- are no longer displayed in the UI;

- don’t receive updates from the client side; transmission of server-side updates resumes when the component is made visible again.

**Example**: Using the `component.setVisible()` method.

```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 the
    // "Changed my label" text is transmitted
    label.setVisible(true);
});
```

> **Note:** If you set a container (such as a `Div` or `Vertical/HorizontalLayout`) that has child components to invisible, all inner components also become invisible. No server-side updates are sent to them, and no client updates are received from them. When the container becomes visible again, transmission of updates to the children also resumes.

### <a id="client-side-consequences-of-the-invisible-setting"></a>Client-side Consequences of the Invisible Setting

The invisible setting has different consequences, depending on whether the component has been rendered:

- If a component is set to invisible before it’s rendered for the first time, the corresponding element in the DOM isn’t created, but the server-side structure is maintained. When the component is set to visible, the DOM is updated.

  **Example**: Setting an unrendered component to invisible.

  ```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
  // no matter if the component is visible or not
  System.out.println("Number of children: "
          + container.getChildren().collect(
                  Collectors.counting()));
  ```

- If a component that has already been rendered is set to invisible, the corresponding element in the DOM is marked with the `hidden` attribute. The component isn’t removed from the DOM.

  This is also true for components used in a `PolymerTemplate` mapped by the `@Id` annotation. When set to invisible, the component is marked with the `hidden` attribute on the client side. The DOM structure isn’t altered.

  **Example**: Setting a rendered component mapped by the `@Id` annotation to invisible.

  ```java
  @Id("my-component")
  private Component mappedComponent;

  // sets the attribute "hidden" of the element on the
  // client-side
  mappedComponent.setVisible(false);
  ```

## <a id="enabled-state"></a>Enabled State

You can disable user interaction with a component using the `component.setEnabled(false)` method on the server. This method:

- blocks any interaction from the client to the server for the disabled component and its children, and

- adds a `disabled` property to any client elements.

The enabled state of the component cascades to the child components of the element when it’s disabled, but it doesn’t override the enabled state of the children. For example, if you have a layout with children A and B, and B is disabled, calling `layout.setEnabled(false)` marks both A and B as disabled. If you later enable the layout by calling `layout.setEnabled(true)`, child B remains disabled, because it was disabled at the component level.

> **Note:** Disabling a component in a template isn’t the same as disabling it on the server, because the server doesn’t know about client elements. Any `@Id` bound template components are handled as if they are normal child components, and receive enabled state changes.

See [Component Enabled State](https://vaadin.com/docs/v23/create-ui/enabled-state.md) for more.

`4DE87AF2-2DFA-49FE-81FD-EAFF02FD5644`