Scroller

Scroller is a component container for creating scrollable areas in the UI.

Scroll Direction
Theme Variants
Related Components

Scroller is a container component that enables scrollable areas within the UI.

Source code

ScrollerBasic.javapackage com.vaadin.demo.component.scroller;

import com.vaadin.flow.component.Unit;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.datepicker.DatePicker;
import com.vaadin.flow.component.html.*;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

import java.time.LocalDate;

@Route("scroller-basic")
public class ScrollerBasic extends VerticalLayout {

    public static final String PERSONAL_TITLE_ID = "personal-title";
    public static final String EMPLOYMENT_TITLE_ID = "employment-title";

    public ScrollerBasic() {
        getStyle().set("border", "solid 1px var(--vaadin-border-color)");
        setHeight(400, Unit.PIXELS);
        setMaxWidth(100, Unit.PERCENTAGE);
        setPadding(false);
        setSpacing(false);
        setWidth(360, Unit.PIXELS);
        setAlignItems(FlexComponent.Alignment.STRETCH);

        // Header
        Header header = new Header();
        header.getStyle().set("display", "flex").set("align-items", "center")
                .set("gap", "1rem").set("padding", "1rem")
                .set("border-bottom", "solid 1px #ccc");

        H2 editEmployee = new H2("Edit employee");
        editEmployee.getStyle().set("font-size", "1.375rem");

        Icon arrowLeft = VaadinIcon.ARROW_LEFT.create();
        arrowLeft.getStyle().set("padding", "0.25rem");
        arrowLeft.getElement().setAttribute("aria-hidden", "true");

        Anchor goBack = new Anchor("#", arrowLeft);
        goBack.setAriaLabel("Go back");

        header.add(goBack, editEmployee);
        add(header);

        // tag::snippet[]
        // Personal information
        H3 personalTitle = new H3("Personal information");
        personalTitle.getStyle().set("font-size", "1.125rem");
        personalTitle.setId(PERSONAL_TITLE_ID);

        TextField firstName = new TextField("First name");
        firstName.setWidthFull();

        TextField lastName = new TextField("Last name");
        lastName.setWidthFull();

        DatePicker birthDate = new DatePicker("Birthdate");
        birthDate.setInitialPosition(LocalDate.of(1990, 1, 1));
        birthDate.setWidthFull();

        Section personalInformation = new Section(personalTitle, firstName,
                lastName, birthDate);
        personalInformation.getElement().setAttribute("aria-labelledby",
                PERSONAL_TITLE_ID);

        // Employment information
        H3 employmentTitle = new H3("Employment information");
        employmentTitle.getStyle().set("font-size", "1.125rem")
                .set("margin-top", "1.5rem");
        employmentTitle.setId(EMPLOYMENT_TITLE_ID);

        TextField position = new TextField("Position");
        position.setWidthFull();

        TextArea additionalInformation = new TextArea("Additional Information");
        additionalInformation.setWidthFull();

        Section employmentInformation = new Section(employmentTitle, position,
                additionalInformation);
        employmentInformation.getElement().setAttribute("aria-labelledby",
                EMPLOYMENT_TITLE_ID);

        Scroller scroller = new Scroller(
                new Div(personalInformation, employmentInformation));
        scroller.getStyle().set("border-bottom", "solid 1px #ccc")
                .set("padding", "1rem");
        scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
        add(scroller);
        // end::snippet[]

        // Footer
        Button save = new Button("Save");
        save.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

        Button reset = new Button("Reset");
        reset.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

        Footer footer = new Footer(save, reset);
        footer.getStyle().set("display", "flex").set("gap", "0.5rem")
                .set("padding", "0.5rem 1rem");
        add(footer);
    }

}
scroller-basic.tsximport '@vaadin/icons';
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { DatePicker } from '@vaadin/react-components/DatePicker.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Scroller } from '@vaadin/react-components/Scroller.js';
import { TextArea } from '@vaadin/react-components/TextArea.js';
import { TextField } from '@vaadin/react-components/TextField.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

const headerStyle = {
  display: 'flex',
  alignItems: 'center',
  gap: '1rem',
  padding: '1rem',
  borderBottom: 'solid 1px var(--vaadin-border-color)',
};

function Example() {
  return (
    <VerticalLayout id="container">
      <header style={headerStyle}>
        <a href="#" aria-label="Go back">
          <Icon icon="vaadin:arrow-left" style={{ padding: '0.25rem' }} aria-hidden="true" />
        </a>
        <h2 style={{ fontSize: '1.375rem' }}>Edit employee</h2>
      </header>

      {/* tag::snippet[] */}
      <Scroller
        style={{ borderBottom: 'solid 1px var(--vaadin-border-color)', padding: '1rem' }}
        scrollDirection="vertical"
      >
        <section aria-labelledby="personal-title">
          <h3 id="personal-title" style={{ fontSize: '1.125rem' }}>
            Personal information
          </h3>
          <TextField style={{ width: '100%' }} label="First name" />
          <TextField style={{ width: '100%' }} label="Last name" />
          <DatePicker initialPosition="1990-01-01" label="Birthdate" style={{ width: '100%' }} />
        </section>
        <section aria-labelledby="employment-title">
          <h3 id="employment-title" style={{ fontSize: '1.125rem', marginTop: '1.5rem' }}>
            Employment information
          </h3>
          <TextField style={{ width: '100%' }} label="Position" />
          <TextArea style={{ width: '100%' }} label="Additional information" />
        </section>
      </Scroller>
      {/* end::snippet[] */}

      <footer style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem 1rem' }}>
        <Button theme="primary">Save</Button>
        <Button theme="tertiary">Reset</Button>
      </footer>
    </VerticalLayout>
  );
}

scroller-basic.tsimport '@vaadin/button';
import '@vaadin/date-picker';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/text-area';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('scroller-basic')
export class Example extends LitElement {
  static override styles = css`
    #container {
      align-items: stretch;
      border: 1px solid var(--vaadin-border-color);
      max-width: 100%;
      height: 400px;
      width: 360px;
    }

    header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      border-bottom: solid 1px var(--vaadin-border-color);
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-vertical-layout id="container">
        <header>
          <a href="#" aria-label="Go back">
            <vaadin-icon
              icon="vaadin:arrow-left"
              style="padding: 0.25rem"
              aria-hidden="true"
            ></vaadin-icon>
          </a>
          <h2 style="font-size: 1.375rem">Edit employee</h2>
        </header>

        <!-- tag::snippet[] -->
        <vaadin-scroller
          style="border-bottom: solid 1px var(--vaadin-border-color); padding: 1rem"
          scroll-direction="vertical"
        >
          <section aria-labelledby="personal-title">
            <h3 id="personal-title" style="font-size: 1.125rem">Personal information</h3>
            <vaadin-text-field style="width: 100%" label="First name"></vaadin-text-field>
            <vaadin-text-field style="width: 100%" label="Last name"></vaadin-text-field>
            <vaadin-date-picker
              style="width: 100%"
              initial-position="1990-01-01"
              label="Birthdate"
            ></vaadin-date-picker>
          </section>
          <section aria-labelledby="employment-title">
            <h3 id="employment-title" style="font-size: 1.125rem; margin-top: 1.5rem">
              Employment information
            </h3>
            <vaadin-text-field style="width: 100%" label="Position"></vaadin-text-field>
            <vaadin-text-area style="width: 100%" label="Additional information"></vaadin-text-area>
          </section>
        </vaadin-scroller>
        <!-- end::snippet[] -->

        <footer style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem">
          <vaadin-button theme="primary">Save</vaadin-button>
          <vaadin-button theme="tertiary">Reset</vaadin-button>
        </footer>
      </vaadin-vertical-layout>
    `;
  }
}

Scroll Direction

Scroller supports four scroll directions: vertical, horizontal, both, and none. The default is both.

Vertical

When vertical scrolling is enabled, users can scroll down if the content exceeds the container’s height. Horizontal overflow, however, is clipped and inaccessible—so the content’s width should be set to 100%.

Horizontal

When horizontal scrolling is enabled, users can scroll sideways if the content exceeds the container’s width. However, vertical overflow is clipped and inaccessible—so the content’s height should be set to 100%.

Note	Use horizontal scrolling with caution, as it’s less common and can be harder for users to notice and interact with—especially on non-mobile devices.

Desktop

Aside from grids, horizontal scrolling is uncommon in desktop or business applications, as it can be unintuitive and cumbersome.

To improve usability, consider using buttons to make horizontal scrolling more noticeable and accessible. For horizontally scrollable lists, it’s good practice to indicate the total number of items and highlight which ones are currently in view.

Mobile

Horizontal scrolling or swiping is more common on mobile, often used for navigation. It can also help conserve vertical space—for example, when displaying less important content such as shortcuts or images.

Open in a
new tab

Source code

ScrollerMobile.javapackage com.vaadin.demo.component.scroller;

import com.vaadin.flow.component.Unit;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Section;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.router.Route;

@Route("scroller-mobile")
public class ScrollerMobile extends Section {

    public ScrollerMobile() {
        getStyle().set("border", "solid 1px var(--vaadin-border-color)");
        setMaxWidth(100, Unit.PERCENTAGE);
        setWidth(360, Unit.PIXELS);

        // Header
        H2 createNewTitle = new H2("Create new...");
        createNewTitle.getStyle().set("padding", "1rem 1rem 0").set("font-size",
                "1.375rem");
        add(createNewTitle);

        // tag::snippet[]
        Scroller scroller = new Scroller();
        scroller.setScrollDirection(Scroller.ScrollDirection.HORIZONTAL);

        Button auditBtn = new Button("Audit");
        auditBtn.setIcon(new Icon(VaadinIcon.CLIPBOARD_CHECK));
        auditBtn.setHeight("100px");

        Button reportBtn = new Button("Report");
        reportBtn.setIcon(new Icon(VaadinIcon.BOOK_DOLLAR));
        reportBtn.setHeight("100px");

        Button dashboardBtn = new Button("Dashboard");
        dashboardBtn.setIcon(new Icon(VaadinIcon.LINE_CHART));
        dashboardBtn.setHeight("100px");

        Button invoiceBtn = new Button("Invoice");
        invoiceBtn.setIcon(new Icon(VaadinIcon.INVOICE));
        invoiceBtn.setHeight("100px");

        HorizontalLayout buttons = new HorizontalLayout(auditBtn, reportBtn,
                dashboardBtn, invoiceBtn);
        buttons.getStyle().set("display", "inline-flex");
        buttons.setPadding(true);

        scroller.setContent(buttons);
        add(scroller);
        // end::snippet[]
    }

}
scroller-mobile.tsximport '@vaadin/icons';
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Scroller } from '@vaadin/react-components/Scroller.js';

const sectionStyle = {
  border: 'solid 1px var(--vaadin-border-color)',
  width: '360px',
  maxWidth: '100%',
};

function Example() {
  return (
    <section id="container" style={sectionStyle}>
      <h2 style={{ padding: '1rem 1rem 0', fontSize: '1.375rem' }}>Create new...</h2>
      {/* tag::snippet[] */}
      <Scroller scroll-direction="horizontal">
        <HorizontalLayout style={{ display: 'inline-flex' }} theme="padding spacing">
          <Button style={{ height: '100px' }}>
            <Icon icon="vaadin:clipboard-check" slot="prefix" />
            Audit
          </Button>
          <Button style={{ height: '100px' }}>
            <Icon icon="vaadin:book-dollar" slot="prefix" />
            Report
          </Button>
          <Button style={{ height: '100px' }}>
            <Icon icon="vaadin:line-chart" slot="prefix" />
            Dashboard
          </Button>
          <Button style={{ height: '100px' }}>
            <Icon icon="vaadin:invoice" slot="prefix" />
            Invoice
          </Button>
        </HorizontalLayout>
      </Scroller>
      {/* end::snippet[] */}
    </section>
  );
}

scroller-mobile.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('scroller-mobile')
export class Example extends LitElement {
  static override styles = css`
    section {
      border: solid 1px var(--vaadin-border-color);
      max-width: 100%;
      width: 360px;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <section id="container">
        <h2 style="padding: 1rem 1rem 0; font-size: 1.375rem">Create new...</h2>

        <!-- tag::snippet[] -->
        <vaadin-scroller scroll-direction="horizontal">
          <vaadin-horizontal-layout style="display: inline-flex" theme="padding spacing">
            <vaadin-button style="height: 100px;">
              <vaadin-icon icon="vaadin:clipboard-check" slot="prefix"></vaadin-icon>
              Audit
            </vaadin-button>
            <vaadin-button style="height: 100px;">
              <vaadin-icon icon="vaadin:book-dollar" slot="prefix"></vaadin-icon>
              Report
            </vaadin-button>
            <vaadin-button style="height: 100px;">
              <vaadin-icon icon="vaadin:line-chart" slot="prefix"></vaadin-icon>
              Dashboard
            </vaadin-button>
            <vaadin-button style="height: 100px;">
              <vaadin-icon icon="vaadin:invoice" slot="prefix"></vaadin-icon>
              Invoice
            </vaadin-button>
          </vaadin-horizontal-layout>
        </vaadin-scroller>
        <!-- end::snippet[] -->
      </section>
    `;
  }
}

Both

When the scroll direction is set to Both (the default), users can scroll both vertically and horizontally if the content overflows in either direction.

This option is ideal for allowing users to pan across large elements, such as images. It can also serve as a fallback for responsive layouts that may overflow in certain situations.

Open in a
new tab

Source code

ScrollerBoth.javapackage com.vaadin.demo.component.scroller;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.streams.DownloadHandler;

@Route("scroller-both")
public class ScrollerBoth extends Div {

    public ScrollerBoth() {
        // tag::snippet[]
        Scroller scroller = new Scroller();
        scroller.setWidthFull();
        scroller.setHeight("300px");

        DownloadHandler imageHandler = DownloadHandler.forClassResource(
                getClass(), "/images/reindeer.jpg", "reindeer.jpg");

        Image img = new Image(imageHandler,
                "A reindeer walking on a snowy lake shore at dusk");
        scroller.setContent(img);

        add(scroller);
        // end::snippet[]
    }

}
scroller-both.tsximport React from 'react';
import { Scroller } from '@vaadin/react-components/Scroller.js';
import img from '../../../../../src/main/resources/images/reindeer.jpg?url';

function Example() {
  return (
    // tag::snippet[]
    <Scroller style={{ height: '300px', width: '100%' }}>
      <img src={img} alt="A reindeer walking on a snowy lake shore at dusk" />
    </Scroller>
    // end::snippet[]
  );
}

scroller-both.tsimport '@vaadin/scroller';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
import img from '../../../../src/main/resources/images/reindeer.jpg?url';

@customElement('scroller-both')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-scroller style="height: 300px; width: 100%">
        <img src="${img}" alt="A reindeer walking on a snowy lake shore at dusk" />
      </vaadin-scroller>
      <!-- end::snippet[] -->
    `;
  }
}

None

Use None to hide overflowing content in either direction. No scrollbars are provided, and the clipped content is inaccessible. None is useful in fixed-size or fixed-layout scenarios where overflow would cause issues.

Theme Variants

Scroller has one theme variant: overflow-indicators.

This variant adds borders to indicate when content overflows the scroll container. For example, if more content is available by scrolling down, a bottom border appears. If content overflows at the top, a top border is shown, and so on for other directions.

You shouldn’t add padding to the scroller when using this variant, as it prevents the borders from appearing in the correct positions.

Open in a
new tab

Source code

ScrollerOverflowIndicators.javapackage com.vaadin.demo.component.scroller;

import com.vaadin.flow.component.Unit;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Footer;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.Scroller;
import com.vaadin.flow.component.orderedlayout.ScrollerVariant;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.EmailField;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("scroller-overflow-indicators")
public class ScrollerOverflowIndicators extends VerticalLayout {

    public ScrollerOverflowIndicators() {
        getStyle().set("border", "solid 1px var(--vaadin-border-color)");
        setAlignItems(Alignment.STRETCH);
        setHeight(400, Unit.PIXELS);
        setMaxWidth(100, Unit.PERCENTAGE);
        setPadding(false);
        setSpacing(false);
        setWidth(360, Unit.PIXELS);

        // Header
        H2 createYourAccount = new H2("Create your account");
        createYourAccount.getStyle().set("padding", "1rem").set("font-size",
                "1.375rem");
        add(createYourAccount);

        // tag::snippet[]
        TextField firstName = new TextField("First name");
        TextField lastName = new TextField("Last name");
        EmailField email = new EmailField("Email");
        TextField phoneNumber = new TextField("Phone number");
        TextField address = new TextField("Address");
        TextField city = new TextField("City");
        ComboBox<String> state = new ComboBox<>("State");
        TextField zipCode = new TextField("Zip code");
        ComboBox<String> country = new ComboBox<>("Country");

        Div div = new Div(firstName, lastName, email, phoneNumber, address,
                city, state, zipCode, country);
        div.getStyle().set("display", "flex").set("flex-direction", "column")
                .set("padding", "0 1rem 1rem");

        Scroller scroller = new Scroller(div);
        scroller.addThemeVariants(ScrollerVariant.LUMO_OVERFLOW_INDICATORS);
        scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
        add(scroller);
        // end::snippet[]

        // Footer
        Button next = new Button("Next");
        next.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

        Button cancel = new Button("Cancel");
        cancel.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

        Footer footer = new Footer(next, cancel);
        footer.getStyle().set("display", "flex").set("gap", "0.5rem")
                .set("padding", "0.5rem 1rem");
        add(footer);
    }

}
scroller-overflow-indicators.tsximport '@vaadin/icons';
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Checkbox } from '@vaadin/react-components/Checkbox.js';
import { Scroller } from '@vaadin/react-components/Scroller.js';
import { TextField } from '@vaadin/react-components/TextField.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

function Example() {
  return (
    <VerticalLayout id="container">
      <h2 style={{ fontSize: '1.375rem', padding: '1rem' }}>Create your account</h2>

      {/* tag::snippet[] */}
      <Scroller scrollDirection="vertical" theme="overflow-indicators">
        <div style={{ display: 'flex', flexDirection: 'column', padding: '0 1rem 1rem' }}>
          <TextField style={{ width: '100%' }} label="First name"></TextField>
          <TextField style={{ width: '100%' }} label="Last name"></TextField>
          <TextField style={{ width: '100%' }} label="Email"></TextField>
          <TextField style={{ width: '100%' }} label="Phone number"></TextField>
          <TextField style={{ width: '100%' }} label="Address"></TextField>
          <TextField style={{ width: '100%' }} label="City"></TextField>
          <TextField style={{ width: '100%' }} label="State"></TextField>
          <TextField style={{ width: '100%' }} label="Zip code"></TextField>
          <TextField style={{ width: '100%' }} label="Country"></TextField>
          <Checkbox label="Agree to terms and conditions" />
        </div>
      </Scroller>
      {/* end::snippet[] */}

      <footer style={{ display: 'flex', gap: '0.5rem', padding: '0.5rem 1rem' }}>
        <Button theme="primary">Next</Button>
        <Button theme="tertiary">Cancel</Button>
      </footer>
    </VerticalLayout>
  );
}

scroller-overflow-indicators.tsimport '@vaadin/button';
import '@vaadin/checkbox';
import '@vaadin/email-field';
import '@vaadin/scroller';
import '@vaadin/text-field';
import '@vaadin/vertical-layout';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('scroller-overflow-indicators')
export class Example extends LitElement {
  static override styles = css`
    #container {
      align-items: stretch;
      border: 1px solid var(--vaadin-border-color);
      max-width: 100%;
      height: 400px;
      width: 360px;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-vertical-layout id="container">
        <h2 style="padding: 1rem; font-size: 1.375rem">Create your account</h2>
        <!-- tag::snippet[] -->
        <vaadin-scroller scroll-direction="vertical" theme="overflow-indicators">
          <div style="display: flex; flex-direction: column; padding: 0 1rem 1rem">
            <vaadin-text-field label="First name"></vaadin-text-field>
            <vaadin-text-field label="Last name"></vaadin-text-field>
            <vaadin-email-field label="Email"></vaadin-email-field>
            <vaadin-text-field label="Phone number"></vaadin-text-field>
            <vaadin-text-field label="Address"></vaadin-text-field>
            <vaadin-text-field label="City"></vaadin-text-field>
            <vaadin-combo-box label="State"></vaadin-combo-box>
            <vaadin-text-field label="Zip code"></vaadin-text-field>
            <vaadin-combo-box label="Country"></vaadin-combo-box>
            <vaadin-checkbox label="Agree to terms and conditions"></vaadin-checkbox>
          </div>
        </vaadin-scroller>
        <!-- end::snippet[] -->
        <footer style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem">
          <vaadin-button theme="primary">Next</vaadin-button>
          <vaadin-button theme="tertiary">Cancel</vaadin-button>
        </footer>
      </vaadin-vertical-layout>
    `;
  }
}

Component	Usage recommendations
Horizontal Layout	A layout that aligns components and HTML elements horizontally
Vertical Layout	A layout that aligns components and HTML elements vertically.

Component

Usage recommendations

Horizontal Layout

A layout that aligns components and HTML elements horizontally

Vertical Layout

A layout that aligns components and HTML elements vertically.

6DC07651-5F23-4ADD-B8CD-E87750453184

Docs

Docs

Scroller

Scroll Direction

Vertical

Horizontal

Desktop

Mobile

Both

None

Theme Variants

Docs

Scroll Direction

Vertical

Horizontal

Desktop

Mobile

Both

None

Theme Variants

Related Components