Bottom Sheet – Code

Implementation
BottomSheet Props

Common Examples

To use the BottomSheet, pass the required title and content props. Open it with a Carto Button through trigger, or control it with isOpen and onOpenChange.

import { BottomSheet, Button } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <BottomSheet
      title="Filters"
      trigger={<Button label="Open filters" />}
      content={<FilterForm />}
    />
  );
}

Body content

Unlike Dialog, the sheet’s content is a general body region for forms, lists, and composed layouts.

Subheader

Pass a short subheader to provide context beneath the title.

Close button

The header close button appears by default. Set showCloseButton={false} to remove it. The sheet remains dismissable through the drag handle, backdrop, and Escape.

Scrolling body

Content beyond the current detent scrolls inside the body while the handle and header remain visible.

Controlled state

Omit trigger and pass isOpen with onOpenChange when an event or another component opens the sheet.

<>
  <Button label="Open filters" onPress={() => setOpen(true)} />
  <BottomSheet
    title="Filters"
    isOpen={isOpen}
    onOpenChange={setOpen}
    content={<FilterForm />}
  />
</>

Internationalization

Localize title, subheader, and content before passing them to BottomSheet. The component uses these messages for built-in controls:

ai-kit.bottomSheet.close
ai-kit.bottomSheet.resize
ai-kit.bottomSheet.resizeValue

Mount AiKitIntlProvider inside CartoTheme to switch locale or override them. resizeValue receives a {percent} value.

React Accessibility

The required title labels the modal through aria-labelledby. subheader is associated through aria-describedby.
The drag handle is a vertical slider. Arrow keys move between detents and expose the current viewport percentage.
The body is always keyboard-focusable so keyboard users can scroll plain content.
React Aria supplies focus trapping and restoration, scroll lock, aria-modal, Escape dismissal, and outside-interaction dismissal.

<BottomSheet
  title="Filters"
  subheader="Narrow your results"
  trigger={<Button label="Open filters" />}
  content={<FilterForm />}
  showCloseButton
/>

`BottomSheet` Props

The BottomSheet accepts the following props and forwards remaining React Aria ModalOverlay state and dismissal props.

ReactNode

required

General body content, including forms, lists, and composed layout.

string

required

Accessible title rendered in the header.

string

Class merged onto the sheet surface.

boolean

Whether the sheet starts open when uncontrolled.

boolean

default:"true"

Whether outside interaction closes the sheet.

boolean

Prevents Escape from closing the sheet.

boolean

Controlled open state. Pair with onOpenChange.

(isOpen: boolean) => void

Called when the open state changes.

boolean

default:"true"

Shows the header close button.

string

Short secondary line beneath the title.

ReactElement<ButtonProps>

Carto Button that opens the sheet. Omit for controlled state.

AI Kit

Agent Experience

Bottom Sheet – Code

Common Examples

Body content

Subheader

Close button

Scrolling body

Controlled state

Internationalization

React Accessibility

`BottomSheet` Props

​Common Examples

​Body content

​Subheader

​Close button

​Scrolling body

​Controlled state

​Internationalization

​React Accessibility

​BottomSheet Props

Common Examples

Body content

Subheader

Close button

Scrolling body

Controlled state

Internationalization

React Accessibility

`BottomSheet` Props