> Markdown version of [Mixin Interfaces](https://vaadin.com/docs/next/flow/component-internals/mixins). Section index: [llms.txt](https://vaadin.com/docs/next/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 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/25.4.0-alpha1/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 the `HasElement` and `HasEnabled` mixins. Using this mixin is covered in the [Component Containers](https://vaadin.com/docs/next/flow/component-internals/container.md) reference guide.

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

## <a id="hascomponentsoftype-interface"></a>`HasComponentsOfType` Interface (since V25.2)

The `HasComponentsOfType<T>` interface is the typed counterpart of `HasComponents`. Implement it when your component should only accept child components of a specific type, so that the API statically prevents callers from adding unrelated components. For example, a breadcrumb trail component could implement `HasComponentsOfType<BreadcrumbItem>` to only accept breadcrumb items as children.

`HasComponents` is equivalent to `HasComponentsOfType<Component>` and extends it; use `HasComponents` for containers that accept any component. Like `HasComponents`, this interface extends the `HasElement` and `HasEnabled` mixins, and its default implementations assume that children are attached to the component’s root element.

```java
@Tag("nav")
public class Breadcrumb extends Component
        implements HasComponentsOfType<BreadcrumbItem> {
}

Breadcrumb breadcrumb = new Breadcrumb();
breadcrumb.add(new BreadcrumbItem("Home"));
breadcrumb.add(new Span("Not allowed")); // Doesn't compile
```

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

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

The `HasStyle` interface adds a CSS class attribute and supports inline styles. `Component` implements it by default. It extends the `HasElement` mixin.

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

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

Vaadin 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`:

- `HasAriaLabel` 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.

- `HasAriaDescription` (since V25.3) is for components that have an accessible description, set by referencing existing elements on the page with `setAriaDescribedBy()`. The description supplements the accessible name with additional information for assistive technologies.

- `HasAriaRole` (since V25.3) is for components that have a role DOM attribute, which defines the semantic meaning of the component for assistive technologies. `setAriaRole()` sets the role on the root element by default; override the methods to put it on another element.

- `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. This interface is deprecated for removal: its methods (`replace()`, `indexOf()`, `getComponentCount()`, and `getComponentAt()`) are now available directly on `HasComponents`.

- `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.

Example 1. Setting a component’s with without and with the `HasSize` mixin interface

```
// Before implementing HasSize:
getElement().getStyle().set("width", "300px");
// After implementing HasSize:
setWidth("300px");
```

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