Skip to content

Sheet

Sheet is a mobile-first bottom panel component built on top of Drawer. It defaults to bottom placement and rounded top corners.

Quick Start

from faststrap import Button, Sheet

Button(
    "Open actions",
    data_bs_toggle="offcanvas",
    data_bs_target="#mobileActions",
)

Sheet(
    "Quick actions go here",
    sheet_id="mobileActions",
    title="Actions",
)

Notes

  • Sheet wraps Drawer with placement="bottom".
  • Pass height to control panel height (for example "50%", "70vh").
  • Other Drawer kwargs such as backdrop and scroll are supported.
  • Requires Bootstrap JavaScript because it uses the offcanvas behavior from Drawer.
  • Trigger it with data_bs_toggle="offcanvas" and data_bs_target="#yourSheetId".

Usage Scenarios

Transaction Entry

Sheet(
    Form(
        FormGroup("Amount", Input(name="amount", type="number")),
        FormGroup("Category", Select(name="category", options=[...])),
        Button("Save", variant="primary", type="submit"),
    ),
    sheet_id="txSheet",
    title="New Transaction",
    height="60vh",
)

Filter Drawer

Sheet(
    FilterBar(
        Input(placeholder="Filter by name..."),
        Select(name="status", options=[...]),
        Button("Apply", variant="primary"),
        Button("Reset", variant="secondary"),
    ),
    sheet_id="filterSheet",
    title="Filters",
    backdrop=True,
)

Accessibility

  • Ensure the trigger button has an accessible name.
  • Sheet uses role="dialog" and focus management from Bootstrap's offcanvas.

Parameters

Parameter Type Default Description
*children Any Required Sheet content
sheet_id str \| None None ID used by trigger target
title str \| None None Optional header title
height str "auto" CSS height for the sheet
**kwargs Any - Forwarded to Drawer

Example With Form Controls

Sheet(
    Input("email", label="Invite by email"),
    Button("Send invite", variant="primary"),
    sheet_id="inviteSheet",
    title="Invite teammate",
    height="60vh",
)

faststrap.components.display.sheet.Sheet(*children, sheet_id=None, title=None, height='auto', radius='lg', **kwargs)

A mobile-native "Bottom Sheet" component.

This is a wrapper around Drawer with specific styling to look like a bottom sheet (rounded top corners, bottom placement).

Parameters:

Name Type Description Default
*children Any

Content

 ()
sheet_id str | None

Unique ID

 None
title str | None

Title

 None
height str

CSS height value (default: auto)

 'auto'
radius str

Top-corner rounding token (lg default keeps the original rounded-top-4; use md or none for calmer surfaces).

 'lg'
**kwargs Any

Arguments passed to Drawer

 {}
Source code in src/faststrap/components/display/sheet.py 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
@register(category="display", requires_js=True)
def Sheet(
    *children: Any,
    sheet_id: str | None = None,
    title: str | None = None,
    height: str = "auto",  # auto, 50%, 100%
    radius: str = "lg",
    **kwargs: Any,
) -> Div:
    """
    A mobile-native "Bottom Sheet" component.

    This is a wrapper around `Drawer` with specific styling to look like
    a bottom sheet (rounded top corners, bottom placement).

    Args:
        *children: Content
        sheet_id: Unique ID
        title: Title
        height: CSS height value (default: auto)
        radius: Top-corner rounding token (``lg`` default keeps the original
            ``rounded-top-4``; use ``md`` or ``none`` for calmer surfaces).
        **kwargs: Arguments passed to Drawer
    """
    # Force placement to bottom
    kwargs["placement"] = "bottom"

    # Radius handling: keep the historical rounded top corners by default.
    user_cls = kwargs.pop("cls", "")
    radius_map = {
        "lg": "rounded-top-4",
        "md": "rounded-top-3",
        "sm": "rounded-top-2",
        "none": "rounded-top-0",
    }
    sheet_cls = radius_map.get(radius, "rounded-top-4")

    # Add handle visual
    # We inject a small handle at the top of the body or header
    # But since Drawer structure is rigid, we'll just style the container

    # Merge classes
    final_cls = merge_classes(sheet_cls, user_cls)

    # Custom styles
    user_style = kwargs.pop("style", {})
    if isinstance(user_style, dict):
        if height != "auto":
            user_style["height"] = height
            user_style["max-height"] = "90vh"  # Never full full screen to keep context
    elif isinstance(user_style, str):
        style_str = user_style.strip()
        if height != "auto":
            sheet_height = f"height: {height}; max-height: 90vh;"
            user_style = f"{sheet_height} {style_str}" if style_str else sheet_height
        else:
            user_style = style_str

    return Drawer(
        *children, drawer_id=sheet_id, title=title, cls=final_cls, style=user_style, **kwargs
    )