Details

Anatomy
Theme Variants
Best Practices
Related Components

The Details component is an expandable panel for showing and hiding content from the user to make the UI less crowded.

Source code

DetailsBasic.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("details-basic")
public class DetailsBasic extends Div {

  public DetailsBasic() {
    // tag::snippet[]
    Span name = new Span("Sophia Williams");
    Span email = new Span("sophia.williams@company.com");
    Span phone = new Span("(501) 555-9128");
    
    VerticalLayout content = new VerticalLayout(name, email, phone);
    content.setSpacing(false);
    content.setPadding(false);

    Details details = new Details("Contact information", content);
    details.setOpened(true);

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

}

Anatomy

Details consists of a summary and a content area.

Summary

The Summary is the part that is always visible, and typically describes the contents, for example, with a title. Clicking on the summary toggles the content area’s visibility.

The summary supports rich content and can contain any component. This can be utilised for example to indicate the status of the corresponding content.

Open in a
new tab

Source code

DetailsSummary.javapackage com.vaadin.demo.component.details;

import com.vaadin.demo.domain.Country;
import com.vaadin.demo.domain.DataService;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
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.textfield.TextField;
import com.vaadin.flow.dom.ElementConstants;
import com.vaadin.flow.router.Route;

@Route("details-summary")
public class DetailsSummary extends Div {

  public DetailsSummary() {
    // tag::snippet[]
    HorizontalLayout summary = new HorizontalLayout();
    summary.setSpacing(false);
    
    Icon icon = VaadinIcon.EXCLAMATION_CIRCLE.create();
    icon.getStyle().set(ElementConstants.STYLE_WIDTH, "var(--lumo-icon-size-s)");
    icon.getStyle().set(ElementConstants.STYLE_HEIGHT, "var(--lumo-icon-size-s)");
    
    HorizontalLayout errorBadge = new HorizontalLayout(
      icon,
      new Span(" 2 errors")
    );
    errorBadge.setSpacing(false);
    errorBadge.getStyle().set(ElementConstants.STYLE_COLOR, "var(--lumo-error-text-color)");
    errorBadge.getStyle().set("margin-left", "var(--lumo-space-s)");

    summary.add(new Text("Contact information"), errorBadge);

    FormLayout content = new FormLayout();
    content.setResponsiveSteps(
      new FormLayout.ResponsiveStep("0", 1),
      new FormLayout.ResponsiveStep("20em", 2)
    );

    TextField address = new TextField("Address");
    address.setValue("4027 Amber Lake Canyon");
    content.add(address, 2);

    TextField zipCode = new TextField("ZIP code");
    zipCode.setRequired(true);
    content.add(zipCode);
    
    TextField city = new TextField("City");
    city.setRequired(true);
    content.add(city);
    
    ComboBox<Country> countries = new ComboBox<>("Country");
    countries.setItems(DataService.getCountries());
    countries.setItemLabelGenerator(Country::getName);
    content.add(countries);
    

    Details details = new Details(summary, content);
    details.setOpened(true);

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

}

Content

This is the collapsible part of Details. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.

Open in a
new tab

Source code

DetailsContent.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.html.Anchor;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.dom.ElementConstants;
import com.vaadin.flow.router.Route;

@Route("details-content")
public class DetailsContent extends Div {

  public DetailsContent() {
    // tag::snippet[]

    Details analyticsDetails = createDetails("Analytics",
      createStyledAnchor("#", "Dashboard"),
      createStyledAnchor("#", "Reports"),
      createStyledAnchor("#", "Data sources")
    );

    Details customersDetails = createDetails("Customers",
      createStyledAnchor("#", "Accounts"),
      createStyledAnchor("#", "Contacts")
    );

    Details financesDetails = createDetails("Finances",
      createStyledAnchor("#", "Invoices"),
      createStyledAnchor("#", "Transactions"),
      createStyledAnchor("#", "Statements")
    );

    add(analyticsDetails, customersDetails, financesDetails);
    // end::snippet[]
  }

  private Details createDetails(String summary, Anchor ...anchors) {
    Details details = new Details(summary, createContent(anchors));
    details.setOpened(true);

    return details;
  }

  private VerticalLayout createContent(Anchor ...anchors) {
    VerticalLayout content = new VerticalLayout();
    content.setPadding(false);
    content.setSpacing(false);
    content.add(anchors);

    return content;
  }

  private Anchor createStyledAnchor(String href, String text) {
    Anchor anchor = new Anchor(href, text);
    anchor.getStyle().set(ElementConstants.STYLE_COLOR, "var(--lumo-primary-text-color)");
    anchor.getStyle().set("text-decoration", "none");

    return anchor;
  }

}

Theme Variants

Details has three theme variants: filled, small, and reverse. Theme variants can be freely combined with each other. For example, all three themes variants can be applied to the same Details component.

Filled

The filled theme variant makes the component’s boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.

Open in a
new tab

Source code

DetailsFilled.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.ListItem;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.router.Route;

@Route("details-filled")
public class DetailsFilled extends Div {

  public DetailsFilled() {
    // tag::snippet[]
    UnorderedList content = new UnorderedList(
      new ListItem("Blake Martin"),
      new ListItem("Caroline Clark"),
      new ListItem("Avery Torres"),
      new ListItem("Khloe Scott"),
      new ListItem("Camila Fisher"),
      new ListItem("Gavin Lewis"),
      new ListItem("Isabella Powell"),
      new ListItem("Zoe Wilson")
    );

    Details details = new Details("Members (8)", content);
    details.setOpened(true);
    details.addThemeVariants(DetailsVariant.FILLED);

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

}

Small

Use the small theme variant for compact UIs.

Open in a
new tab

Source code

DetailsSmall.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.ListItem;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.router.Route;

@Route("details-small")
public class DetailsSmall extends Div {

  public DetailsSmall() {
    // tag::snippet[]
    UnorderedList content = new UnorderedList(
      new ListItem("Blake Martin"),
      new ListItem("Caroline Clark"),
      new ListItem("Avery Torres"),
      new ListItem("Khloe Scott"),
      new ListItem("Camila Fisher"),
      new ListItem("Gavin Lewis"),
      new ListItem("Isabella Powell"),
      new ListItem("Zoe Wilson")
    );

    Details details = new Details("Members (8)", content);
    details.setOpened(true);
    details.addThemeVariants(DetailsVariant.SMALL);

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

}

Reverse

The reverse theme variant places the toggle icon after the summary contents, which can be useful for visually aligning the summary with other content.

Open in a
new tab

Source code

DetailsReverse.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.details.DetailsVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.ListItem;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.router.Route;

@Route("details-reverse")
public class DetailsReverse extends Div {

  public DetailsReverse() {
    // tag::snippet[]
    UnorderedList content = new UnorderedList(
      new ListItem("Blake Martin"),
      new ListItem("Caroline Clark"),
      new ListItem("Avery Torres"),
      new ListItem("Khloe Scott"),
      new ListItem("Camila Fisher"),
      new ListItem("Gavin Lewis"),
      new ListItem("Isabella Powell"),
      new ListItem("Zoe Wilson")
    );

    Details details = new Details("Members (8)", content);
    details.setOpened(true);
    details.addThemeVariants(DetailsVariant.REVERSE);

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

}

Disabled

Details can be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded Details are automatically disabled as well.

Open in a
new tab

Source code

DetailsDisabled.javapackage com.vaadin.demo.component.details;

import com.vaadin.flow.component.details.Details;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.ListItem;
import com.vaadin.flow.component.html.UnorderedList;
import com.vaadin.flow.router.Route;

@Route("details-disabled")
public class DetailsDisabled extends Div {

  public DetailsDisabled() {
    // tag::snippet[]
    UnorderedList content = new UnorderedList(
      new ListItem("Blake Martin"),
      new ListItem("Caroline Clark"),
      new ListItem("Avery Torres"),
      new ListItem("Khloe Scott"),
      new ListItem("Camila Fisher"),
      new ListItem("Gavin Lewis"),
      new ListItem("Isabella Powell"),
      new ListItem("Zoe Wilson")
    );

    Details details = new Details("Members (8)",
        content);
    details.setEnabled(false);

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

}

Best Practices

Use Details to group related content and to lessen the risk of overwhelming the user with information. However, avoid putting important information in a Details component unless it is expanded by default. Otherwise, the user might not notice it.

Details can be used instead of Accordion if there is a need to see content from multiple collapsible content areas simultaneously.

Component	Usage recommendations
Accordion	Vertically stacked set of expandable panels, in which only one panel can be expanded at a time.
Tabs	Component for organising and grouping content into navigable sections.

Component

Usage recommendations

Accordion

Vertically stacked set of expandable panels, in which only one panel can be expanded at a time.

Tabs

Component for organising and grouping content into navigable sections.

6C4A3E79-3F62-454E-B170-30C934D2106D

Docs

Docs

Details

Anatomy

Summary

Content

Theme Variants

Filled

Small

Reverse

Disabled

Best Practices

Docs

Anatomy

Summary

Content

Theme Variants

Filled

Small

Reverse

Disabled

Best Practices

Related Components