> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Details [Beta] - Web

> Details [Beta] are accordions with a labeled summary row that can show text, chips, buttons, and menus beside the label.

> [!NOTE]
>
> For development, import `Details` from
> `@servicetitan/anvil2/beta`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=161-2504).

> [!NOTE]
>
> **Beta Feature**
>
> This feature is currently in beta, and needs to be imported from `@servicetitan/anvil2/beta`.
>
> While we hope to minimize breaking changes, they may occur due to feedback we receive or other improvements. These will always be documented in the changelog and communicated in Slack.
>
> Please reach out in the [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS) channel with any questions or feedback!

> [!NOTE]
>
> Details \[Beta] extends the stable [Details](https://anvil.servicetitan.com/docs/components/details/web.md). Behavior, `Details.Content`, and tokens are the same. Only `Details.Summary` differs. To move from the stable component, see the [migration guide](https://anvil.servicetitan.com/docs/components/details-beta/beta-changes/summary-label-and-attributes.md).

## Anatomy

Details \[Beta] consists of four primary elements that work together to show or hide information when clicked.

1. Chevron
2. Label
3. Attributes (optional)
4. Body content

## Options

Details \[Beta] supports the following configurations to describe the summary at a glance.

### Label

The label is bold by default and supports two inline markers: `*italic*` and `==highlight==`. Use `labelProps.size` to change the text scale, and `labelProps.moreInfo` to add an info button with a tooltip.

details-beta-label

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/details-beta-label?file=src/App.tsx)

```tsx lines theme={null}
import { Details } from "@servicetitan/anvil2/beta";

function App() {
  return (
    <div style={{ maxWidth: "32rem" }}>
      <Details>
        <Details.Summary
          label="Open *estimates* from ==this week=="
          labelProps={{
            size: "large",
            moreInfo: "Totals include parts, labor, and permits.",
          }}
        />
        <Details.Content>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Details.Content>
      </Details>
    </div>
  );
}

export default App;
```

### Attributes

Attributes are cells that sit on the same grid as the label. Use them to surface status, totals, and quick actions without opening the Details.

| Type | Use for |
| - | - |
| `text` | A `label: value` pair, with the value in bold. |
| `chip` | A status or count. |
| `button` | A single action related to the summary. |
| `menu` | Several related actions. |

details-beta-attributes

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/details-beta-attributes?file=src/App.tsx)

```tsx lines theme={null}
import { Details } from "@servicetitan/anvil2/beta";

function App() {
  return (
    <div style={{ maxWidth: "48rem" }}>
      <Details defaultExpanded>
        <Details.Summary
          label="Job pricing"
          templateColumns="2fr 1fr auto auto auto"
          attributes={[
            { type: "text", label: "Total", value: "$4,820.00" },
            { type: "chip", label: "Open", color: "#cce3ff" },
            { type: "button", label: "Review", onClick: () => {} },
            {
              type: "menu",
              label: "Actions",
              items: [
                { label: "Edit", onClick: () => {} },
                { label: "Duplicate", onClick: () => {} },
                { label: "Delete", disabled: true },
              ],
            },
          ]}
        />
        <Details.Content>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Details.Content>
      </Details>
    </div>
  );
}

export default App;
```

## Behavior

Details \[Beta] responds to user interaction the same way as the stable Details, with one addition for attributes.

Clicking the label, a text cell, a chip cell, or empty space in the summary row opens or closes the Details. Button and menu cells run only their own action and never toggle the Details.

The label wraps when there is not enough room. Attribute cells do not wrap, and a cell beyond the last grid track moves to a new row.

## Usage Guidelines

| Standard | Requirement |
| - | - |
| DoSummarize the content with attributes | Show the one or two values a user needs to decide whether to open the Details. |
| DoMatch `templateColumns` to the content below | Use the same proportions as the content so each cell sits near its column. |
| Don'tCrowd the summary row | Avoid filling every track. Move secondary actions into a `menu` cell. |
| Don'tHide essential task information | The same guidance as the stable Details applies. Essential information belongs outside Details. |

Use the stable [Details](https://anvil.servicetitan.com/docs/components/details/web.md) when the summary is plain text and needs no attributes.

## Content

Content within Details \[Beta] should keep the label short and written in sentence case. Capitalize only the first word and proper nouns. Avoid `**bold**` markup, since the label is already bold.

## Keyboard Interaction

Users can navigate Details \[Beta] using standard keyboard controls.

| Key | Description |
| - | - |
| Tab | Move to the toggle button, then to the info button and each button or menu cell in order. |
| Space or Enter | Opens or closes the Details when the toggle button is focused. |

## Code

**Implementation**

details-beta-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/details-beta-playground?file=src/App.tsx)

```tsx lines expandable theme={null}
import { Details } from "@servicetitan/anvil2/beta";

function App() {
  return (
    <div style={{ maxWidth: "32rem" }}>
      <Details>
        <Details.Summary
          label="Job pricing"
          templateColumns="1fr auto"
          attributes={[{ type: "chip", label: "Open", color: "#cce3ff" }]}
        />
        <Details.Content>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Details.Content>
      </Details>
    </div>
  );
}

export default App;
```

## Common Examples

### Placing cells on the grid

`templateColumns` defaults to `1fr`, which gives the label the whole row. The label takes the first track and each cell takes the next one. Add one track for each cell, and size a track wider for a cell that needs more room.

```tsx theme={null}
<Details.Summary
  label="Job pricing"
  templateColumns="1fr auto auto"
  gap="4"
  attributes={[
    { type: "text", label: "Total", value: "$4,820.00" },
    { type: "button", label: "Review", onClick: review },
  ]}
/>
```

### Styling the summary

`className` and `style` apply to the summary row. Override colors with the `--a2-mod-details-summary-*` custom properties set through `style`. See the [migration guide](https://anvil.servicetitan.com/docs/components/details-beta/beta-changes/summary-label-and-attributes.md#styling-the-summary) for the full list.

### Controlling and grouping

`expanded`, `defaultExpanded`, `onClick`, and `Details.Content` height props work as they do on the stable [Details](https://anvil.servicetitan.com/docs/components/details/web.md).

## React Accessibility

The summary row is a `group` labelled by the label text. The toggle button holds the label and sets `aria-expanded` and `aria-controls`, so its accessible name is the label alone. The info button, button cells, and menu cells are separate controls outside the toggle button.

The info button has the accessible name "More information about" followed by the label.

**Details Props**

```tsx theme={null}
<Details defaultExpanded={false}>
  <Details.Summary label="Job pricing" />
  <Details.Content>Content here</Details.Content>
</Details>
```

## `Details` Props

`Details` accepts the same props as the stable [Details](https://anvil.servicetitan.com/docs/components/details/web.md).

**defaultExpanded** `boolean` (default: false)

Controls the default expanded state for uncontrolled details.

**expanded** `boolean` (default: false)

Controls the expanded state for controlled details.

**Details.Summary Props**

```tsx theme={null}
<Details.Summary
  label="Job pricing"
  templateColumns="1fr auto"
  attributes={[{ type: "chip", label: "Open" }]}
/>
```

## `Details.Summary` Props

`Details.Summary` also accepts button props other than `children`. They apply to the toggle button, except `className` and `style`, which apply to the summary row.

**label** `string` *required*

Text for the first cell, beside the expand arrow. Supports `*italic*` and `==highlight==`.

**attributes** `DetailsSummaryColumnAttribute[]`

Cells placed on the grid after the label, each in its own track.

**gap** `GridProps['gap']`

Space between the grid tracks.

**labelProps** `DetailsSummaryLabelProps`

Options for the label.

**templateColumns** `GridProps['templateColumns']` (default: 1fr)

Grid tracks shared by the label and the attribute cells.

**DetailsSummaryLabelProps**

## `DetailsSummaryLabelProps`

**moreInfo** `string`

Adds an info button after the label that shows this text in a tooltip. Pressing it does not toggle the Details.

**size** `"small" | "medium" | "large" | "xlarge"` (default: "medium")

Text scale of the label.

**DetailsSummaryColumnAttribute**

## `DetailsSummaryColumnAttribute`

A discriminated union on `type`.

### `DetailsSummaryTextAttribute`

**type** `"text"` *required*

**label** `string`

Regular-weight text before the value.

**size** `"small" | "medium" | "large" | "xlarge"` (default: "medium")

**value** `string`

Bold text after the label. The colon shows only when both `label` and `value` are set.

### `DetailsSummaryChipAttribute`

**label** `ChipProps['label']` *required*

**type** `"chip"` *required*

**color** `ChipProps['color']`

### `DetailsSummaryButtonAttribute`

**label** `string` *required*

**type** `"button"` *required*

**appearance** `ButtonProps['appearance']` (default: "secondary")

**icon** `ButtonProps['icon']`

A bare icon renders before the label. Use `{ after }` to trail it.

**onClick** `ButtonProps['onClick']`

Runs on click. The click does not toggle the Details.

### `DetailsSummaryMenuAttribute`

**items** `DetailsSummaryMenuItem[]` *required*

Items listed in the menu, in order. Submenus are not supported.

**label** `string` *required*

**type** `"menu"` *required*

### `DetailsSummaryMenuItem`

**label** `string` *required*

**disabled** `boolean`

Keeps the item in keyboard navigation but prevents selection.

**onClick** `MenuItemProps['onClick']`

Runs when the item is selected. The menu then closes.

**Details.Content Props**

## `Details.Content` Props

`Details.Content` is the stable component's. See the stable [Details.Content props](https://anvil.servicetitan.com/docs/components/details/web.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.