> Markdown version of [Using Existing Components](https://vaadin.com/docs/v24/flow/create-ui/creating-components/composite). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Creating a Component Using Existing Components

This section demonstrates how to create a `Composite` component using existing components.

The example creates a `TextField` component by combining existing `Div`, `NativeLabel` and `Input` HTML components into this hierarchy:

- `Div`

  - `NativeLabel`

  - `Input`

> **Note: Create the component based on a Composite**
>
> Creating the component based on a `Composite` is the best practice in these circumstances. It’s possible to create a new component by extending the `Div` HTML component, but this isn’t 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 NativeLabel label;
    private Input input;

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

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

- The `Composite` automatically creates the root component, specifying it by using generics (`Composite<Div>`).

- You can access the root component through the `getContent()` method.

- In the constructor, you only need to create the child components and add them to the root `Div`.

- Set the value by using `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. You do this by delegating to the `Input` and `NativeLabel` 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: Keeping overhead to a minimum**
>
> Using a `Component` (instead of an `Element`) or a `Composite` doesn’t result in extra overhead.

`6047C25F-34E4-4192-BAAF-D9057BF74F0D`