> Markdown version of [Using Vaadin Mixin Interfaces](https://vaadin.com/docs/v24/flow/create-ui/creating-components/mixins). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Using Vaadin Mixin Interfaces

A *mixin* refers to a defined amount of functionality that can be added to a class. Previously, Java didn’t support this kind of multiple inheritance. However, since Java 8 interfaces can also include default methods, which allows them to work as mixins.

Vaadin Flow uses the mixin concept to provide common APIs and default behavior for sets of functionalities found in most Web Components.

The most important predefined mixins are provided by the `HasSize`, `HasComponents`, and `HasStyle` interfaces. You can use these interfaces to add typical functions to your Java components.

## <a id="hassize-interface"></a>HasSize Interface

If your component implements the `HasSize` interface, you can set the size of the component using the `setWidth(String)` and `setHeight(String)` methods.

This interface extends `HasElement` mixin. [Full method summary of the `HasSize` interface](https://vaadin.com/api/platform/24.10.12/com/vaadin/flow/component/HasSize.html#method-summary).

## <a id="hascomponents-interface"></a>HasComponents Interface

If your component implements the `HasComponents` interface, you can add and remove child components to and from it. This interface extends `HasElement` and `HasEnabled` mixins.

It should generally be implemented by layouts or components whose primary function is to host child components. It shouldn’t be, for example, implemented by non-layout components such as fields.

[Full method summary of the `HasComponents` interface](https://vaadin.com/api/platform/24.10.12/com/vaadin/flow/component/HasComponents.html#method-summary).

## <a id="hasstyle-interface"></a>HasStyle Interface

The `HasStyle` interface adds a class attribute and supports inline styles. It’s implemented in `Component`, by default. It extends `HasElement` mixin.

[Full method summary of the `HasStyle` interface](https://vaadin.com/api/platform/24.10.12/com/vaadin/flow/component/HasStyle.html#method-summary).

## <a id="using-mixin-interfaces"></a>Using Mixin Interfaces

Were you to create a custom `Tooltip` component, for example, that implements the `HasComponents` and `HasStyle` interfaces, you would do something like this:

`Tooltip.java`

```java
@Tag("sample-tooltip")
@JsModule("./sample-tooltip.ts")
public class Tooltip extends LitTemplate
        implements HasComponents, HasStyle {

}
```

sample-tooltip.ts

```javascript
import { html, LitElement } from 'lit';

class SampleTooltip extends LitElement {
  render() {
    return html`
      <div part="content" theme="dark">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('sample-tooltip', SampleTooltip);
```

A component that implements `HasComponents` needs to extend from a tag that supports having child components. The `slot` tag is used in Web Components to define where child components should be put.

When you implement the `HasComponents` interface, adding child components to the parent component is allowed automatically.

For example, adding new `H5` and `Paragraph` child components to the `Tooltip` parent component would look something like this:

```java
Tooltip tooltip = new Tooltip();

tooltip.add(new H5("Tooltip"));
tooltip.add(new Paragraph("I am a paragraph"));
```

## <a id="other-useful-mixin-interfaces"></a>Other Useful Mixin Interfaces

Vaadin Flow provides many additional useful mixin interfaces. `HasElement` is a low level API that is extended by most other mixins. `HasElement` is a marker interface for any class that’s based on an `Element`.

The following list has mixins depending directly on a root element — all of which extends `HasElement`:

- `HasArialLabel` is for components and other UI objects that may have an aria-label and an aria-labelledby DOM attributes to set the accessible name of the component.

- `HasEnabled` is for components and other UI objects that can be enabled or disabled.

- `HasHelper` is for field components that have helper text as property and slots for inserting components.

- `HasLabel` is for components that support label definition.

- `HasOrderedComponents` supports ordered child components, with an index for the layout.

- `HasText` is for components that support text content.

- `HasTheme` is for components that have a theme DOM attribute.

- `HasValueAndElement` is the same as `HasValue`. It also extends `HasElement` and `HasEnabled`.

- `Focusable<T>` provides methods to gain and lose focus.

The following mixins are for more generic use, without direct dependency to any root element:

- `HasItems` is for components that display a collection of items.

- `HasDataProvider<T>` is for listing components that use a data provider to display data. It also extends `HasItems`.

- `HasValidation` is for components that supports input validation.

- `HasValue` is for field components and other UI objects that have a user-editable value.

## <a id="advantages-of-mixin-interfaces"></a>Advantages of Mixin Interfaces

Using Vaadin mixins is a best practice because their code and functionality has been thoroughly checked and tested by Vaadin.

Mixins also keep your code clean and simple. For example, compare setting a component’s width. Here’s what you’d have to do without mixins:

```
getElement().getStyle().set("width", "300px")
```

That’s not too complicated. Here’s what’s required after implementing the `HasSize` interface:

```
setWidth("300px")
```

That’s much simpler and easier to maintain.

`7E2169AD-5503-46B1-B044-6043B5C8BB4B`