> Markdown version of [Creating a Component with Multiple Elements](https://vaadin.com/docs/v14/flow/creating-components/tutorial-component-many-elements). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Creating a Component with Multiple Elements

In this section we demonstrate how to create a component using the `Element` API and multiple DOM elements. We create a `TextField` component that supports a label.

**Example**: DOM structure of the component.

```html
<div>
    <label></label>
    <input>
</div>
```

**Example**: `TextField` component with `<input>` and `<label>` elements

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

    Element labelElement = new Element("label");
    Element inputElement = new Element("input");

    public TextField() {
        inputElement
               .synchronizeProperty("value", "change");
        getElement()
               .appendChild(labelElement, inputElement);
  }
}
```

- The DOM structure is set up by marking the root element as a `<div>` in the `@Tag` annotation.

- The label and input elements are appended to the root element.

- Value synchronization is set up using the input element.

See [Creating a Simple Component Using the Element API](https://vaadin.com/docs/v14/flow/creating-components/tutorial-component-basic.md) for an alternative way to synchronize.

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

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

**Example**: Adding an API to get and set values for the input and label elements.

```java
  public String getLabel() {
      return labelElement.getText();
  }

  public String getValue() {
      return inputElement.getProperty("value");
  }

  public void setLabel(String label) {
      labelElement.setText(label);
  }

  public void setValue(String value) {
    inputElement.setProperty("value", value);
  }
```

`CBD76521-B5BD-4F37-AD81-9715F922FF6C`