Bottom Sheet

Reference

• Root

  The root container that manages the state and behavior of the bottom sheet system. Coordinates the interaction between trigger and content components. Primarily designed for mobile interfaces, providing a panel that slides up from the bottom of the screen.

  • Attributes

    • default-open

      string

      /

      default: -

      The initial open state of the bottom sheet when rendered. Use when you do not need to control its open state.

    • open

      boolean

      /

      default: false

      The controlled open state of the bottom sheet. Must be used in conjunction with onOpenChange.

  • Events

    • onOpenChange

      Event handler called when the open state of the bottom sheet changes.

• Trigger

  A wrapper component that must contain an sc-button. The button controls the visibility of the bottom sheet content and automatically receives appropriate ARIA attributes.

• Portal

  Renders the backdrop and content into the CSS top layer, ensuring proper stacking context and visibility above other page elements. This ensures the bottom sheet appears above all other content when opened.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

• Backdrop

  An optional overlay that renders behind the bottom sheet content to enhance focus on the content and provide visual separation from the underlying page.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

  • Classes

    • close-transition

      Applied during the closing transition and removed when fully closed.

    • open

      Applied when the bottom sheet is in an open state.

    • open-transition

      Applied during the opening transition and removed when fully open.

• Content

  The container that holds the bottom sheet's content. Manages swipe gestures for intuitive touch-based dismissal.

  • Attributes

    • aria-described-by

      string

      /

      default: -

      References the ID of the element that describes the bottom sheet's purpose. Used to provide additional context for screen readers.

    • aria-labelled-by

      string

      /

      default: -

      References the ID of the element that labels the bottom sheet. Essential for proper screen reader identification.

    • close-autofocus

      boolean

      /

      default: true

      When true, returns focus to the trigger element after the bottom sheet closes. Ensures proper focus management for keyboard navigation.

    • disable-swipe

      boolean

      /

      default: false

      When true, prevents the bottom sheet from being dismissed through swipe gestures. Useful when you need to ensure users complete an action before closing.

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.

    • open-autofocus

      boolean

      /

      default: true

      When true, automatically focuses the first focusable element in the content when opened. Helps ensure proper keyboard navigation flow.

  • Events

    • onClickOutside

      Event handler called when a click occurs outside the bottom sheet.

    • onCloseTransitionEnd

      Event handler called when the closing transition completes.

    • onEscapeKeydown

      Event handler called when the Escape key is pressed while the bottom sheet is open.

    • onOpenTransitionEnd

      Event handler called when the opening transition completes.

  • Classes

    • close-transition

      Applied during the closing transition and removed when fully closed.

    • closing

      Applied when the bottom sheet is closing. Useful for creating different opening and closing transitions.

    • open

      Applied when the bottom sheet is in an open state.

    • open-transition

      Applied during the opening transition and removed when fully open.

• Close

  A wrapper for an sc-button that handles bottom sheet closure. Automatically assigns appropriate ARIA roles to the button for accessibility support.

• Scroll Area

  A scrollable container that allows scrolling within the bottom sheet content while preventing scroll interaction with the underlying page. Ensures content remains accessible when it exceeds the viewport height.

  • Attributes

    • id

      string

      /

      default: -

      ID that is forwarded to the underlying container for DOM manipulation.