> Markdown version of [Single Element](https://vaadin.com/docs/v24/flow/create-ui/creating-components/basic). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Creating a Component Using the Element API

This section demonstrates how to create a component using the `Element` API and a single DOM element.

**Example**: Creating a `TextField` component based on an `<input>` element.

```java
@Tag("input")
public class TextField extends Component {

    public TextField(String value) {
        getElement().setProperty("value",value);
    }
}
```

- The root element is:

  - created automatically (by the `Component` class) based on the `@Tag` annotation.

  - Accessed using the `getElement()` method.

  - Used to set the initial value of the field.

> **Tip:** You can use predefined constants in the `@Tag` annotation. For example, the `@Tag("input")` annotation is equivalent to `@Tag(Tag.INPUT)`. Most tag names have a constant, but not all.

## <a id="adding-an-api"></a>Adding an API

To make the component easier to use, you can add an API to get and set the value.

**Example**: Adding an API using the `@Synchronize` annotation.

```java
@Synchronize("change")
public String getValue() {
    return getElement().getProperty("value");
}
public void setValue(String value) {
    getElement().setProperty("value", value);
}
```

- Adding the `@Synchronize` annotation to the getter ensures that the browser sends property changes to the server.

- The annotation defines the name of the DOM event that triggers synchronization, in this case a `change` event.

- Changes to the input element cause the updated `value` property (deduced from the getter name) to be sent to the server.

> **Tip: Using the @Synchronize annotation**
>
> The `@Synchronize` annotation can specify multiple events and override the name of the property, if necessary.

> **Note: @Synchronize maps events from the root element**
>
> The `@Synchronize` annotation only maps events that originate from the root element, or are bubbled to the root element. For example, if you have an `<input>` element inside a `<div>` element, `@Synchronize` only maps events from the `<div>` element.

See [Using API Helpers to Define Component Properties](https://vaadin.com/docs/v24/flow/create-ui/creating-components/property-descriptor.md) for an alternative, and simpler, way to manage properties and attributes.

## <a id="overriding-default-disabled-behavior"></a>Overriding Default Disabled Behavior

The `setEnabled` method is available for all components that implement the `HasEnabled` interface.

> **Note: Availability of the setEnabled() method**
>
> The `setEnabled()` method is also available for all components that implement the `HasValue`, `HasComponents` or `Focusable` interfaces.

By default, disabling a component adds a `disabled` property to the client element. You can change this behavior by overriding the `Component:onEnabledStateChanged(boolean)` method.

**Example**: Overriding the default disabled behavior to cause items to be updated in a component that has a customized "disabled" indicator.

```java
@Override
public void onEnabledStateChanged(boolean enabled) {
    setDisabled(!enabled);
    refreshButtons();
}
```

`2E20FB94-B5FD-4105-B53B-3EECA329EFF3`