Implementation
Details Props
Details.Content Props
Details.Summary Props
Common Examples
import { Details } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<Details>
<Details.Summary>Click to expand</Details.Summary>
<Details.Content>Lorem ipsum dolor sit amet.</Details.Content>
</Details>
);
}
JSX content in details
The children prop of the Details component can accept any ReactNode. In many cases, text will be all that is required. In more complex scenarios, other Anvil2 components and JSX can be used.Controlling details
By default, the Details component is uncontrolled and expands/collapses based on user input (on click or on enter or space key press when the element is focused). Use the expanded prop to control the details expanded state programatically.Accordions
To create an accordion-style details list, control the open state of each item using the expanded on onClick props.Details content height options
The following props are available to control the height of the details content: height and maxHeight. If either is set, the content element will also have overflow: auto.<Details defaultExpanded={false} expanded={false}>
<Details.Summary>Click to expand</Details.Summary>
<Details.Content>Content here</Details.Content>
</Details>
Details Props
Controls the default expanded state for uncontrolled details.
Controls the expanded state for controlled details.
<Details.Content height="200px" maxHeight="400px">
Content here
</Details.Content>
Details.Content Props
<Details.Summary onClick={() => console.log("Clicked")}>
Click to expand
</Details.Summary>
Details.Summary Props
The Details.Summary component can accept any valid HTML button props.Last modified on January 23, 2026
