> Markdown version of [Creating a Component Using Existing Components](https://vaadin.com/docs/v14/flow/creating-components/tutorial-component-composite). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Creating a Component Using Existing Components

In this section we demonstrate how to create a `Composite` component using existing components.

We create a `TextField` component by combining existing `Div`, `Label` and `Input` HTML components into this hierarchy:

- `Div`

  - `Label`

  - `Input`

> **Note:** Creating the component based on a `Composite` is the best practice in these circumstances. While it is possible to create a new component by extending the `Div` HTML component, this is not advisable, because it unnecessarily exposes `Div` API methods, such as `add(Component)`, to the user.

**Example**: Creating a `TextField` component by extending `Composite<Div>`.

```java
public class TextField extends Composite<Div> {

    private Label label;
    private Input input;

    public TextField(String labelText, String value) {
        label = new Label();
        label.setText(labelText);
        input = new Input();
        input.setValue(value);

        getContent().add(label, input);
    }
}
```

- The `Composite` automatically creates the root component (specified using generics (`Composite<Div>`)).

- The root component is available through the `getContent()` method.

- In the constructor, it is only necessary to create the child components and add them to the root `Div`.

- The value is set using the `setValue` method in the `Input` component.

## <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 and label text, by delegating to the `Input` and `Label` components.

**Example**: Adding an API to get and set the value and label.

```java
public String getValue() {
    return input.getValue();
}
public void setValue(String value) {
    input.setValue(value);
}

public String getLabel() {
    return label.getText();
}
public void setLabel(String labelText) {
    label.setText(labelText);
}
```

- The public API only exposes the defined methods, and a few generic methods defined in the `Component` interface.

> **Tip:** Neither using a `Component` (instead of an `Element`), nor using a `Composite`, introduces additional overhead in the browser.

`4429671A-23AB-4151-9D32-E93DDA52C4A8`