🧩 Components

Material Design components for FastHTML using BeerCSS

🎯 Overview

This module provides a comprehensive set of Material Design components for building FastHTML applications.

Category	Components	Purpose
🔘 Buttons	ButtonT, NavToggleButton	Button variants and navigation toggles
🔗 Links	AT (AnchorChain)	Styled anchor/link variants
📐 Layout	Grid, GridCell, DivHStacked, DivVStacked, DivCentered	Grid system and flex layouts
🎨 Icons	Icon	Material Design icons
🧭 Navigation	NavBar, NavContainer, NavSideBarContainer, BottomNav	Navigation components
💬 Modals	Modal, ModalButton, ModalTitle, ModalBody, ModalFooter	Dialog windows
📝 Forms	Field, LabelInput, CheckboxX, Radio, Switch, TextArea, Range, Select, FormGrid	Form inputs and layout
⏳ Feedback	Progress, LoadingIndicator, Toast, Snackbar	Loading and notifications
📊 Tables	Table, Td, Th, TableFromLists, TableFromDicts, Pagination	Data tables
🃏 Cards	Card, Toolbar	Content containers
🔤 Typography	TextT, TextPresets, CodeSpan, CodeBlock, Blockquote	Text styling
🍪 Misc	FAQItem, CookiesBanner, Divider, Avatar	Utility components

---

📚 Table of Contents

1. 🔘 Buttons - Button variants and chains
2. 🔗 Anchor - Link styling
3. 📐 Grid - Grid system and layout
4. 🎨 Icon - Material icons
5. 🧭 NavBar - Top navigation
6. 💬 Modal Dialog - Dialogs and popups
7. 📝 Label Input - Input fields with labels
8. 🏷️ Form Label - Standalone form labels
9. ☑️ Checkbox - Checkbox inputs
10. 🔘 Radio - Radio buttons
11. 🔀 Switch - Toggle switches
12. 📄 Text Area - Multi-line text
13. 📊 Range - Slider inputs
14. 📋 Select - Dropdown menus
15. 📐 FormGrid - Form layouts
16. 📈 Progress - Progress bars
17. ⏳ Loading Indicator - Spinners
18. 📊 Tables - Data tables
19. 📄 Pagination - Page navigation
20. 🃏 Card - Content cards
21. 🔧 Toolbar - Action bars
22. 🔔 Toast / Snackbar - Notifications
23. 📦 Nav Container - Navigation drawers
24. 📑 Sidebar - Side navigation
25. 🔤 Typography - Text styling

🔘 Buttons

Button variants and navigation toggle helpers.

Export	Description
ButtonT	Chainable button styles (ButtonT.primary, ButtonT.secondary, etc.)
NavToggleButton	Button that toggles navigation rail visibility

💡 Use case: Button("Click", cls=ButtonT.primary.large) creates a large primary button.

---

source

NavToggleButton

def NavToggleButton(
    target, icon:str='menu', kwargs:VAR_KEYWORD
):

Create a navigation toggle button that toggles the ‘max’ class on the target element.

Also toggles icon between ‘menu’ and ‘menu_open’ based on nav state.

def ex_buttons(): 

    return  Article(
        Button("Default", cls=ButtonT.default),  
        Button("Primary", cls=ButtonT.primary),
        Button("Secondary", cls=ButtonT.secondary),
        Button("Danger", cls=ButtonT.destructive),
        Button("Text", cls=ButtonT.text),
        Button("Ghost", cls=ButtonT.ghost),
        Button("Small Primary", cls=ButtonT.primary.small),
        Button("Large Secondary", cls=ButtonT.secondary.large.elevate)
        
    )

preview(ex_buttons())

🔗 Anchor

Chainable anchor/link styles.

Export	Description
AT	Chainable anchor styles (AT.primary, AT.chip, AT.button, etc.)

💡 Use case: A("Learn More", href="/docs", cls=AT.button.primary) creates a button-styled link.

def ex_links(): 
    return Article(
        A('Default Link'),
        Hr(),
        A('Muted Link', cls=AT.muted),
        Hr(),
        A('Text Link',  cls=AT.text), 
        Hr(),
        A('Reset Link', cls=AT.reset), 
        Hr(),
        A('Primary Link', cls=AT.primary), 
        Hr(),
        A('Classic Link', cls=AT.classic),  
        Hr(),
        cls="padding")

preview(ex_links())

📐 Grid

Responsive grid system and flex layout helpers.

Export	Description
Grid	Responsive grid container
GridCell	Grid cell with span control
SpaceT	Spacing enum (SpaceT.small_space, etc.)
GridSpanT	Grid span enum
DivHStacked	Horizontal flex container
DivVStacked	Vertical flex container
DivCentered	Centered flex container
DivFullySpaced	Space-between flex container
DivLAligned / DivRAligned	Left/right aligned containers

Grid Parameters

Parameter	Default	Description
cells	-	Grid children, auto-wrapped with span classes based on cols
space	SpaceT.medium_space	Spacing between grid cells
cols_min	1	Minimum columns at smallest breakpoint
cols_max	4	Maximum columns at largest breakpoint
cols	None	Fixed column count for all breakpoints
cols_sm	None	Column count for small screens
cols_md	None	Column count for medium screens
cols_lg	None	Column count for large screens
responsive	True	Center grid with responsive max-width
padding	True	Add padding around the grid

GridCell Parameters

Parameter	Description
span	String like 's12 m6 l4' or tuple of GridSpanT values
cls	Additional CSS classes

💡 Use case: Grid(GridCell("A", span=6), GridCell("B", span=6)) creates a 2-column layout.

---

source

Grid

def Grid(
    cells:VAR_POSITIONAL, space:SpaceT=<SpaceT.medium_space: 'medium-space'>, cols_min:int=1, cols_max:int=4,
    cols:int=None, cols_sm:int=None, cols_md:int=None, cols_lg:int=None, responsive:bool=True, padding:bool=True,
    cls:str='', kwargs:VAR_KEYWORD
):

BeerCSS responsive grid with smart column defaults and mobile-first design.

MonsterUI-compatible API: cols parameter auto-derives responsive breakpoints: cols=4 -> cols_sm=1, cols_md=2, cols_lg=4 (mobile stacks, tablet halves, desktop full)

For explicit control, use cols_sm, cols_md, cols_lg directly.

---

source

GridCell

def GridCell(
    c:VAR_POSITIONAL, span:tuple=(), cls:str='', kwargs:VAR_KEYWORD
):

Wrap content as a BeerCSS grid cell with responsive span control.

---

source

GridSpanT

def GridSpanT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Grid span classes for responsive layouts (BeerCSS)

---

source

SpaceT

def SpaceT(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

Space types using BeerCSS spacing classes

def ex_grid():
    return Grid(
        Div(
            P("Column 1 Item 1"), 
            P("Column 1 Item 2"), 
            P("Column 1 Item 3")),
        Div(
            P("Column 2 Item 1"), 
            P("Column 2 Item 2"), 
            P("Column 2 Item 2")),
        Div(
            P("Column 3 Item 1"), 
            P("Column 3 Item 2"), 
            P("Column 3 Item 3")))


preview(ex_grid())

def ex_product_grid():
    products = [
        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
    ]
    
    product_cards = [
        Card(
            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
            H4(p["name"], cls="mt-2"),
            P(p["price"]),
            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
        ) for p in products
    ]
    
    return Grid(*product_cards, cols_lg=3)

preview(ex_product_grid())

---

source

DivHStacked

def DivHStacked(
    c:VAR_POSITIONAL, responsive:bool=True, padding:bool=True, cls:str='', kwargs:VAR_KEYWORD
):

Responsive horizontal stack with padding and mobile compatibility.

---

source

DivLAligned

def DivLAligned(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

MonsterUI-compatible left-aligned row using BeerCSS tokens.

def ex_l_aligned_div():
    return Article(
        DivLAligned(
            Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"),
            H4("Left Aligned Title"),
            P("Some text that's left-aligned with the title and image.")
        ),
        cls="padding")

preview(ex_l_aligned_div())

---

source

DivVStacked

def DivVStacked(
    c:VAR_POSITIONAL, responsive:bool=True, padding:bool=True, cls:str='', kwargs:VAR_KEYWORD
):

Responsive vertical stack with padding and mobile compatibility.

def ex_v_stacked_div():
    return Article(
        DivVStacked(
            H2("Vertical Stack"),
            P("First paragraph in the stack"),
            P("Second paragraph in the stack"),
            Button("Action Button", cls=ButtonT.secondary)
        ),
        cls="padding")

preview(ex_v_stacked_div())

def ex_h_stacked_div():
    return Article(
        DivHStacked(
            Div(H4("Column 1"), P("Content for column 1")),
            Div(H4("Column 2"), P("Content for column 2")),
            Div(H4("Column 3"), P("Content for column 3"))
        ),
        cls="padding")

preview(ex_h_stacked_div())

---

source

DivRAligned

def DivRAligned(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

MonsterUI-compatible right-aligned row using BeerCSS tokens.

def ex_r_aligned_div():
    return Article(
        DivRAligned(
            Button("Action", cls=ButtonT.primary),
            P("Right-aligned text"),
            Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;")
        ),
        cls="padding")

preview(ex_r_aligned_div())

---

source

DivCentered

def DivCentered(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

Center-aligned container using BeerCSS tokens.

def ex_centered_div():
    return Article(
        DivCentered(
            H3("Centered Title"),
            P("This content is centered both horizontally and vertically.")
        ),
        cls="padding")

preview(ex_centered_div())

---

source

DivFullySpaced

def DivFullySpaced(
    c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD
):

Row with children stretched to far ends using BeerCSS max spacers.

def ex_fully_spaced_div():
    return Article(
        DivFullySpaced(
            Button("Left", cls=ButtonT.primary),
            Button("Center", cls=ButtonT.secondary),
            Button("Right", cls=ButtonT.destructive),
            Button("Right2", cls=ButtonT.destructive)
        ),
        cls="padding"
    )

preview(ex_fully_spaced_div())

🎨 Icon

Material Design icon component.

Export	Description
Icon	Material icon with optional click handler

💡 Use case: Icon("settings", cls="large primary") creates a large primary settings icon.

---

source

Icon

def Icon(
    icon:str, size:str=None, fill:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD
):

Material Design icon with optional size and fill

def ex_icon():
    return Article(
        Grid(
            Icon('menu', size='large'),     
            Icon('settings', cls='primary-text'),
            Icon('favorite', fill=True)
        ),
        cls="padding")

preview(ex_icon())

🧭 NavBar

Horizontal navigation bar component with HTMX SPA navigation defaults.

Parameter	Default	Purpose
brand	None	Brand element (logo/title) positioned on the left
sticky	False	Stick navbar to top on scroll
blur	None	Glass effect: 'small-blur', 'medium-blur', 'large-blur'
size	'small'	Navbar height: 'small', 'medium', 'large'
center	False	Center navigation links (vs right-aligned)
hx_boost	True	Auto-enhance <a> links for HTMX navigation
hx_target	'#main-content'	Target element for boosted links
hx_swap	None	HTMX swap method (e.g., 'outerHTML')

💡 Basic usage: NavBar(A("Home"), A("About"), brand=H3("MyApp"), sticky=True)

💡 With glass effect: NavBar(..., sticky=True, blur='small-blur', hx_swap='outerHTML')

---

source

NavBar

def NavBar(
    children:VAR_POSITIONAL, brand:NoneType=None, sticky:bool=False, blur:NoneType=None, cls:str='',
    size:str='small', center:bool=False, end:NoneType=None, hx_boost:bool=True, hx_target:str='#main-content',
    hx_swap:NoneType=None, kwargs:VAR_KEYWORD
):

Horizontal navigation bar with HTMX SPA navigation defaults.

Args: brand: Brand element (logo/title) positioned on the left sticky: Whether navbar sticks to top on scroll blur: Blur effect class (‘small-blur’, ‘medium-blur’, ‘large-blur’) for glass effect size: Navbar size - ‘small’ (default), ‘medium’, ‘large’, or None center: Center the navigation links (default False = links on right) end: Optional end slot content (shown at right when center=True) hx_boost: Auto-enhance all links for HTMX navigation (default True) hx_target: Target element for boosted links (default ‘#main-content’) hx_swap: HTMX swap method (e.g., ‘outerHTML’ for full main swap)

Layout modes: center=False: [brand] [spacer] [links…] center=True: [brand] [spacer] [links centered] [spacer] [end?]

Code

def ex_navbar1():
    return NavBar(A("Page1",href='/rt1'),
                  A("Page2",href='/rt2'),
                  A("Page3",href='/rt3'),
                  brand=H3('My Blog'))

preview(ex_navbar1())

💬 Modal Dialog

Modal/dialog components for popups and confirmations.

Export	Description
Modal	Modal container with overlay
ModalButton	Button that triggers modal
ModalTitle	Modal title header
ModalBody	Modal content area
ModalFooter	Modal footer with actions
ModalCancel / ModalConfirm	Pre-styled action buttons

Modal Parameters

Parameter	Default	Description
*c	-	Modal content (title, body, etc.)
id	None	Modal ID for data-ui targeting
footer	None	Footer content (auto-wrapped in Nav)
active	False	Whether modal starts active/visible
overlay	'default'	Overlay style: 'default' (plain), 'blur', 'small-blur', 'medium-blur', 'large-blur', or False/None (no overlay)
position	None	Position: None (center), 'left', 'right', 'top', 'bottom'
cls	()	Additional CSS classes

Helper Components

Component	Purpose
ModalButton(text, id)	Button that opens modal via data-ui
ModalCancel(text, modal_id)	Cancel button that closes modal
ModalConfirm(text, modal_id)	Confirm button that closes modal
ModalTitle(*c)	H5-based title component
ModalBody(*c)	Div wrapper for body content
ModalFooter(*c)	Nav wrapper with right-aligned buttons

💡 Use case: Use data-ui="#modal-id" to link triggers to modals. Position dialogs as side drawers ('left', 'right') or sheets ('top', 'bottom').

---

source

ModalFooter

def ModalFooter(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

Modal footer with right-aligned action buttons.

---

source

ModalBody

def ModalBody(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

Modal body wrapper for content layout.

---

source

ModalTitle

def ModalTitle(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

Modal title using H5 element.

---

source

ModalConfirm

def ModalConfirm(
    text:str='Confirm', modal_id:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

Confirm button that closes modal via data-ui.

---

source

ModalCancel

def ModalCancel(
    text:str='Cancel', modal_id:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

Cancel button that closes modal via data-ui.

---

source

ModalButton

def ModalButton(
    text:str, id:str, icon:str=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

Button that opens a modal via data-ui attribute.

---

source

Modal

def Modal(
    c:VAR_POSITIONAL, id:NoneType=None, footer:NoneType=None, active:bool=False, overlay:str='default',
    position:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS modal dialog with position and overlay options.

Always returns a list for consistent unpacking with *Modal(…). When overlay is enabled, clicking the overlay closes the modal.

Args: *c: Modal content (title, body, etc.) id: Modal ID for data-ui targeting footer: Footer content (auto-wrapped in Nav if not already) active: Whether modal starts active/visible overlay: Overlay style - ‘default’ (plain), ‘blur’, ‘small-blur’, ‘medium-blur’, ‘large-blur’, or False/None (no overlay) position: Position - None (center), ‘left’, ‘right’, ‘top’, ‘bottom’ cls: Additional CSS classes

Returns: List of elements (overlay + dialog, or just [dialog] if no overlay)

def test_modal():
    """Test modal with position and overlay options."""
    return Article(
        # Centered modal with default (plain) overlay
        Button("Centered (Default Overlay)", data_ui="#modal-center", cls="primary"),
        *Modal(
            ModalTitle("Centered Dialog"),
            ModalBody("This modal uses the default plain overlay (no blur)"),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-center"),
                ModalConfirm(modal_id="modal-center")
            ),
            id="modal-center"
        ),
        
        # Left drawer with blur overlay
        Button("Left Drawer (Blur)", data_ui="#modal-left", cls="secondary"),
        *Modal(
            ModalTitle("Left Navigation"),
            ModalBody("This is a left-side drawer with blur overlay. Click overlay to close."),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-left"),
                ModalConfirm(modal_id="modal-left")
            ),
            id="modal-left",
            position='left',
            overlay='blur'
        ),
        
        # Right panel with default overlay
        Button("Right Panel", data_ui="#modal-right"),
        *Modal(
            ModalTitle("Right Panel"),
            ModalBody("This is a right-side panel. Click overlay to close."),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-right"),
                ModalConfirm(modal_id="modal-right")
            ),
            id="modal-right",
            position='right'
        ),
        
        # Bottom sheet
        Button("Bottom Sheet", data_ui="#modal-bottom", cls="tertiary"),
        *Modal(
            ModalTitle("Bottom Sheet"),
            ModalBody("This is a bottom sheet with medium blur"),
            footer=ModalFooter(
                ModalCancel(modal_id="modal-bottom"),
                ModalConfirm(modal_id="modal-bottom")
            ),
            id="modal-bottom",
            position='bottom',
            overlay='medium-blur'
        ),
        
        cls="padding"
    )

preview(test_modal())

📝 Label Input

Component	Purpose
Field	Wrapper for form inputs with border/label/prefix/suffix styling
LabelInput	Complete labeled input with floating label and optional icons

💡 Use case: Building consistent form fields with Material Design floating labels and icon support.

---

source

LabelInput

def LabelInput(
    label:str, id:str=None, placeholder:str=None, input_type:str='text', prefix_icon:str=None, suffix_icon:str=None,
    value:str=None, cls:str='', kwargs:VAR_KEYWORD
):

Labeled input field with floating label and optional icons.

---

source

Field

def Field(
    c:VAR_POSITIONAL, label:bool=False, prefix:bool=False, suffix:bool=False, cls:str='', kwargs:VAR_KEYWORD
):

BeerCSS field wrapper for inputs with border/label/prefix/suffix styling.

def ex_input(): 
    return Article(
        LabelInput(label="Input", id='myid'),
        cls="padding")


preview(ex_input())

🏷️ Form Label

Component	Purpose
FormLabel	Label element with proper for attribute linking

💡 Use case: Creating accessible form labels that click-focus their associated inputs.

---

source

FormLabel

def FormLabel(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

Standalone form label element with MonsterUI-compatible signature.

---

source

LabelInput

def LabelInput(
    label:str, id:str=None, placeholder:str=None, input_type:str='text', prefix_icon:str=None, suffix_icon:str=None,
    value:str=None, cls:str='', kwargs:VAR_KEYWORD
):

Labeled input field with floating label and optional icons.

def ex_form_label(): 
    return Article(
        FormLabel("Username", fr="username-input"),
        LabelInput("Email", input_type="email"),
        cls="padding")


preview(ex_form_label())

☑️ Checkbox

Component	Purpose
CheckboxX	BeerCSS checkbox with label support

💡 Use case: Boolean form inputs with Material Design styling.

---

source

CheckboxX

def CheckboxX(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS checkbox with label support.

def ex_checkbox(): 
    return Article(
        CheckboxX(),
        CheckboxX("Accept terms"),
        CheckboxX("Enabled", checked=True),
        CheckboxX("Option 1", name="options", value="opt1"),
        cls="padding")
        
preview(ex_checkbox())

🔘 Radio

Component	Purpose
Radio	BeerCSS radio button with label

💡 Use case: Single-selection from mutually exclusive options.

---

source

Radio

def Radio(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS radio button with label.

def ex_Radio(): 
    return Article(
        Radio("Option 1", name="group1", value="opt1"),
        Radio("Option 2", name="group1", value="opt2", checked=True),
        cls="padding")

preview(ex_Radio())

🔀 Switch

Component	Purpose
Switch	Toggle switch for on/off states

💡 Use case: Binary settings like dark mode, notifications, feature toggles.

---

source

Switch

def Switch(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS toggle switch for on/off states.

If label text is provided, wraps in a nav with the label on the left and the switch on the right (standard BeerCSS pattern).

def ex_switch(): 
    return Article(
        Switch("Enable notifications", name="notifications", checked=False),
        Switch("Dark mode", name="dark_mode", checked=True),
        Switch(name="no_label"),  # Switch without label
        cls="padding")

preview(ex_switch())

📄 Text Area

Component	Purpose
TextArea	Multi-line text input with field wrapper

💡 Use case: Comments, descriptions, long-form text input.

---

source

TextArea

def TextArea(
    c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS textarea with field wrapper for consistent styling.

def ex_TextArea(): 
    return Article(
        TextArea(placeholder="Enter description..."),
        TextArea("Initial text", rows=5),
        TextArea(placeholder=" "),
        cls="padding")

preview(ex_TextArea())

📊 Range

Component	Purpose
Range	Slider input for numeric ranges

💡 Use case: Volume controls, price filters, numeric value selection within bounds.

---

source

Range

def Range(
    c:VAR_POSITIONAL, min:NoneType=None, max:NoneType=None, step:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS range slider with two-tone fill effect.

def ex_range(): 
    return Article(
        Range(value=25),
        Range(min=0, max=100, value=50),
        cls="padding")

preview(ex_range())

📋 Select & SelectMenu

Component	Purpose
Select	Native HTML select for forms - uses standard change event, works with HTMX
SelectMenu	BeerCSS menu-based dropdown for display menus (profile, actions, navigation)

Select (Native HTML)

Uses the native <select> element with BeerCSS styling. Best for form inputs where you need: - Standard change events for HTMX (hx-trigger="change") - Keyboard navigation and accessibility - Mobile-friendly native picker - Cascading dropdown patterns

# Basic usage with label
Select("Option A", "Option B", "Option C", 
       name="category", label="Category")

# With HTMX for cascading dropdowns
Select("Electronics", "Clothing", "Books",
       name="category",
       label="Category",
       hx_get="/subcategories",
       hx_trigger="change",
       hx_target="#subcategory-wrapper")

Select Parameters

Parameter	Type	Default	Description
*options	str|Option|dict	-	Options (strings, Option elements, or dicts with value/label)
label	str	None	Floating label text
value	str	''	Currently selected value
name	str	''	Form field name
id	str	auto	Element ID (auto-generated from name)
placeholder	str	None	Placeholder option (disabled first option)
cls	str|tuple	()	Additional CSS classes

SelectMenu (Display Menus)

Uses BeerCSS menu element for visual dropdowns. Best for: - Profile menus, action dropdowns - Navigation menus - Any non-form UI where you just need a clickable menu

# Simple menu display
SelectMenu("Home", "About", "Contact", value="Home")

# With icon and custom items
SelectMenu(
    Li(Label("Section"), cls="transparent"),
    Li("Item 1"),
    Li("Item 2"),
    prefix_icon="menu"
)

SelectMenu Parameters

Parameter	Type	Default	Description
*items	str|Li	-	Menu items (strings or Li elements)
value	str	''	Display value text
placeholder	str	'Select...'	Placeholder text when empty
prefix_icon	str	None	Optional icon before input
id	str	None	Wrapper ID
cls	str|tuple	()	Additional CSS classes

💡 Rule of thumb: Use Select for forms, SelectMenu for display-only menus.

---

source

Select

def Select(
    options:VAR_POSITIONAL, label:NoneType=None, value:str='', name:str='', id:NoneType=None,
    placeholder:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD
):

BeerCSS native HTML select with floating label support.

Uses the native element for full browser support including: - Standard ‘change’ event for HTMX (hx-trigger=“change”) - Keyboard navigation - Mobile-friendly native picker - Works seamlessly with cascading dropdowns Args: *options: Option items - strings, Option elements, or dicts with ‘value’/‘label’ keys label: Floating label text (optional) value: Currently selected value name: Form field name id: Element ID (auto-generated from name if not provided) placeholder: Placeholder option text (shown as disabled first option) cls: Additional CSS classes for the field wrapper source SelectMenu def SelectMenu( items:VAR_POSITIONAL, value:str='', placeholder:str='Select...', prefix_icon:NoneType=None, id:NoneType=None, cls:tuple=(), kwargs:VAR_KEYWORD ): BeerCSS menu-based dropdown for display menus (profile, actions, navigation). Not intended for form input - use Select for forms with native change events. This component uses BeerCSS’s menu element which opens/closes on click. Args: *items: Menu items - strings are auto-wrapped in Li, or pass Li elements directly value: Currently displayed value text placeholder: Placeholder text when no value selected prefix_icon: Optional icon to show before the input id: Optional wrapper ID cls: Additional CSS classes Code def ex_select(): return Article( H6("Native Select (for forms)"), # Basic native select with label Select("Home", "About", "Contact", label="Page", value="Home", name="page"), # Native select with placeholder Select("Option 1", "Option 2", "Option 3", placeholder="Choose...", name="option"), # Native select with dict options (separate value/label) Select( {"value": "us", "label": "United States"}, {"value": "uk", "label": "United Kingdom"}, {"value": "ca", "label": "Canada"}, label="Country", name="country", value="us" ), H6("SelectMenu (for display menus)", cls="top-margin"), # Menu-based dropdown for navigation/actions SelectMenu("Home", "About", "Contact", value="Home"), SelectMenu("Option 1", "Option 2", "Option 3", prefix_icon="list"), SelectMenu( Li(Label("Section"), cls="transparent"), Li("Item 1"), Li("Item 2"), Hr(), Li(I("star", cls="tiny"), Div("Special", cls="max")), value="Item 1", prefix_icon="menu" ), cls="padding") preview(ex_select()) Code # Cascading dropdown example with HTMX # Demonstrates native Select's change event for dynamic form updates categories = { "Electronics": ["Phones", "Laptops", "Tablets", "Cameras"], "Clothing": ["Shirts", "Pants", "Shoes", "Accessories"], "Books": ["Fiction", "Non-Fiction", "Comics", "Textbooks"] } @app.get("/cascade-demo") def cascade_demo(): """Demo page with cascading dropdowns.""" return Article( H5("Cascading Select Demo"), P("Select a category to load subcategories via HTMX", cls="small-text grey-text"), # Parent select - triggers HTMX on native change event Select("Electronics", "Clothing", "Books", name="category", label="Category", placeholder="Select category...", hx_get="/cascade-subcategories", hx_trigger="change", hx_target="#subcategory-wrapper", hx_include="[name='category']"), P("Select a sub-category", cls="small-text grey-text"), # Child select - gets swapped by HTMX response Div(Select(placeholder="Select category first...", name="subcategory"), id="subcategory-wrapper"), # Show current selection Div(id="selection-display", cls="padding"), cls="padding" ) @app.get("/cascade-subcategories") def cascade_subcategories(category: str = ''): """Return subcategory Select based on parent selection.""" subs = categories.get(category, []) if not subs: return Select(placeholder="No subcategories available...", name="subcategory") return Select(*subs, name="subcategory", label="Subcategory", placeholder="Select subcategory...", hx_get="/cascade-selection", hx_trigger="change", hx_target="#selection-display", hx_include="[name='category'], [name='subcategory']") @app.get("/cascade-selection") def cascade_selection(category: str = '', subcategory: str = ''): """Display current selection.""" return Div( P(f"Selected: {category} → {subcategory}", cls="bold"), cls="surface padding round" ) # Preview the cascading demo preview(cascade_demo()) Cascading Dropdowns with HTMX The native Select uses the standard change event, enabling cascading dropdowns with pure HTMX - no custom JavaScript required: # In your FastHTML app: # Sample hierarchical data categories = { "Electronics": ["Phones", "Laptops", "Tablets"], "Clothing": ["Shirts", "Pants", "Shoes"], "Books": ["Fiction", "Non-Fiction", "Comics"] } @app.get("/") def home(): return Layout( Form( # Parent select - triggers HTMX on native change event Select("Electronics", "Clothing", "Books", name="category", label="Category", placeholder="Select category...", hx_get="/subcategories", hx_trigger="change", hx_target="#subcategory-wrapper", hx_include="[name='category']"), # Child select - swapped by HTMX Div(Select(placeholder="Select category first..."), id="subcategory-wrapper"), cls="padding" ), title="Cascading Example" ) @app.get("/subcategories") def get_subcategories(category: str): """Return new Select with subcategories for chosen category.""" subs = categories.get(category, []) return Select(*subs, name="subcategory", label="Subcategory", placeholder="Select subcategory...") The pattern works because: 1. Native Select fires the standard change event when user selects an option 2. HTMX listens for this event (hx-trigger="change") 3. Server returns a new Select component with filtered options 4. HTMX swaps it into the target container Note: For display-only menus (profile dropdowns, action menus), use SelectMenu instead. Fieldset def Fieldset(*c, cls=(), **kwargs): """Form fieldset container for grouping related inputs.""" cls_str = stringify(cls) if cls else None if cls_str: return fc.Fieldset(*c, cls=cls_str, **kwargs) return fc.Fieldset(*c, **kwargs) Code def ex_fs(): return Article( Fieldset( Legend("Personal Info"), LabelInput("Name"), LabelInput("Email") ), cls="padding") preview(ex_fs()) Legend def Legend(*c, cls=(), **kwargs): """Fieldset legend/caption element.""" cls_str = stringify(cls) if cls else None if cls_str: return fc.Legend(*c, cls=cls_str, **kwargs) return fc.Legend(*c, **kwargs) Code def ex_l(): return Article( Legend("Account Settings"), cls="padding") preview(ex_l()) 📐 FormGrid Component Purpose FormGrid Responsive grid layout for form fields Parameters Parameter Default Description *c - Child form fields to arrange in grid cols 1 Number of columns (1, 2, 3, or 4) Arranges children in columns on medium+ screens (full-width on small screens). Uses BeerCSS 12-column grid. 💡 Use case: Two-column or multi-column form layouts that collapse on mobile. Defaults to single column for typical forms. source FormGrid def FormGrid( c:VAR_POSITIONAL, cols:int=1 ): Responsive grid layout for form fields that stacks on mobile. Code def ex_form_grid(): """Example: FormGrid with different column configurations.""" return Card( # Header Article( H5("Contact Form Example"), P("Demonstrating FormGrid layout capabilities", cls="small-text grey-text"), cls="center-align padding" ), Form( # 2-column layout (default) H6("Personal Information", cls="small padding"), FormGrid( LabelInput("First Name", id="fn"), LabelInput("Last Name", id="ln"), LabelInput("Email", id="em", input_type="email"), LabelInput("Phone", id="ph", input_type="tel") ), # 3-column layout H6("Address", cls="small padding"), FormGrid( LabelInput("City", id="city"), LabelInput("State", id="state"), LabelInput("Zip Code", id="zip"), cols=3 ), # Single column layout H6("Additional Info", cls="small padding"), FormGrid( LabelInput("Full Address", id="addr"), cols=1 ), # Mix with Select H6("Preferences", cls="small padding"), FormGrid( Select("Option A", "Option B", "Option C", value="Option A"), Select("Low", "Medium", "High", value="Medium", prefix_icon="priority_high"), cols=2 ), # Submit Div( Button("Submit", cls=ButtonT.primary), cls="center-align padding" ), cls="padding" ), cls="surface-container border round" ) preview(ex_form_grid()) 📈 Progress Component Purpose Progress Linear progress bar with value/max 💡 Use case: File uploads, loading states, completion indicators. source Progress def Progress( c:VAR_POSITIONAL, value:str='', max:str='100', cls:tuple=(), kwargs:VAR_KEYWORD ): Linear progress bar with value/max support. Code def ex_progress(): return Article( Progress(value=50, max=100), Progress(value=75), cls="padding") preview(ex_progress()) ⏳ Loading Indicator Component Purpose LoadingIndicator Circular spinner for async operations 💡 Use case: HTMX request indicators, lazy loading states, processing feedback. source LoadingIndicator def LoadingIndicator( size:str='medium', cls:str='', kwargs:VAR_KEYWORD ): BeerCSS circular spinner for async operations. Code def ex_progress(): return Article( LoadingIndicator(), LoadingIndicator(size='small', id='loading'), cls="padding") preview(ex_progress()) 📊 Tables Component Purpose Table BeerCSS table wrapper Thead, Tbody, Tfoot Table sections Th, Td Header and data cells TableFromLists Build table from header/row lists TableFromDicts Build table from list of dicts 💡 Use case: Data display, CRUD listings, reports with sorting/pagination. source TableFromDicts def TableFromDicts( header_data, body_data, footer_data:NoneType=None, header_cell_render:function=Th, body_cell_render:function=<lambda>, footer_cell_render:function=<lambda>, cls:str='border', sortable:bool=False, kwargs:VAR_KEYWORD ): Create table from header keys and body list of dicts. source TableFromLists def TableFromLists( header_data, body_data, footer_data:NoneType=None, header_cell_render:function=Th, body_cell_render:function=Td, footer_cell_render:function=Td, cls:str='border', sortable:bool=False, kwargs:VAR_KEYWORD ): Create table from header list and body list of lists. source Tfoot def Tfoot( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Table footer section. source Tbody def Tbody( c:VAR_POSITIONAL, cls:tuple=(), sortable:bool=False, kwargs:VAR_KEYWORD ): Table body section with optional SortableJS support. source Thead def Thead( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Table header section. source Th def Th( c:VAR_POSITIONAL, shrink:bool=False, expand:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD ): Table header cell with shrink/expand width options. source Td def Td( c:VAR_POSITIONAL, shrink:bool=False, expand:bool=False, cls:tuple=(), kwargs:VAR_KEYWORD ): Table data cell with shrink/expand width options. source Table def Table( c:VAR_POSITIONAL, cls:str='border', kwargs:VAR_KEYWORD ): BeerCSS table with optional border/stripes classes. Code def ex_tablelists(): return Article( TableFromLists( ["Name", "Age"], [["Alice", "25"], ["Bob", "30"]], footer_data=["Total", "2"] ), cls="padding") preview(ex_tablelists()) Code def ex_tabledicts(): return Article( TableFromDicts( ["name", "age"], [{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}], footer_data={"name": "Total", "age": "2"} ), cls="padding") preview(ex_tabledicts()) source TableControls def TableControls( controls:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD ): Toolbar container for table filters, search, and actions. Code def ex_tablecontrols(): return Article( TableControls( Field(Input(placeholder="Search...", hx_get="/table/rows", hx_trigger="keyup changed delay:500ms"), cls="border round"), ), cls="padding") preview(ex_tablecontrols()) 📄 Pagination Component Purpose Pagination Page navigation with HTMX integration 💡 Use case: Table pagination, search results, infinite scroll fallback. source Pagination def Pagination( current_page:int, total_pages:int, hx_get:str, hx_target:str='#table-container', show_first_last:bool=True, cls:str='', kwargs:VAR_KEYWORD ): HTMX-integrated pagination controls with first/prev/next/last buttons. Code def ex_tablePagination(): return Article( Pagination(1, 10, '/table/rows'), cls="padding") preview(ex_tablePagination()) 🃏 Card Component Purpose Card Container with optional header/footer 💡 Use case: Content containers, product cards, user profiles, dashboard widgets. source Card def Card( c:VAR_POSITIONAL, header:NoneType=None, footer:NoneType=None, body_cls:str='padding', header_cls:tuple=(), footer_cls:tuple=(), cls:tuple=(), kwargs:VAR_KEYWORD ): BeerCSS card with optional header/footer sections. Code def ex_card(): return Article( Card("Body content", header="Title", cls="border round"), Card( "Main content here", header=H5("Card Title"), footer=Button("Action"), cls="border round surface-container" ), cls="padding") preview(ex_card()) 🔧 Toolbar Component Purpose Toolbar Action bar for buttons and icons 💡 Use case: Editor toolbars, bulk action bars, form action rows. source Toolbar def Toolbar( items:VAR_POSITIONAL, cls:str='', elevate:str='large', fill:bool=True, kwargs:VAR_KEYWORD ): BeerCSS toolbar for action bars with elevation options. Code def ex_toolbar(): return Article( Toolbar( A(Icon('videocam_off')), A(Icon('mic')), A(Icon('front_hand'), cls='active'), A(Icon('more_vert')) ), cls="padding") preview(ex_toolbar()) 🔔 Toast / Snackbar Component Purpose Toast Notification popup with position and variants 💡 Use case: Success/error messages, action confirmations, brief notifications. Toast/Snackbar Documentation: position: Position of the snackbar - 'top' (default) or 'bottom' only (per Beer CSS specification) variant: BeerCSS variant class (e.g., 'primary', 'secondary') action: Action button/link (string or component) active: Whether snackbar is active/visible dur: Duration in seconds before auto-hide (requires id parameter). If not specified, snackbar won’t auto-hide. Note: When dur is provided, the component automatically generates the JavaScript to show/hide the snackbar after the specified duration. source Snackbar def Snackbar( c:VAR_POSITIONAL, kwargs:VAR_KEYWORD ): Alias for Toast component. source Toast def Toast( c:VAR_POSITIONAL, cls:str='', position:str='top', variant:str='', action:NoneType=None, active:bool=False, dur:NoneType=None, kwargs:VAR_KEYWORD ): BeerCSS snackbar/toast notification with position (‘top’ or ‘bottom’) and variant options. Code def ex_toast(): """Toast examples showing position and auto-hide duration.""" return Div( # Success toast at top with 3 second auto-hide Toast( "✅ Changes saved successfully!", id="toast-success", position='top', variant='success', action=A("Dismiss", cls='inverse-link'), active=True, dur=3.0 ), cls="padding" ) preview(ex_toast()) Code @rt("/test-toast") def example_toast(): return ex_toast() source ContainerT def ContainerT( args:VAR_POSITIONAL, kwds:VAR_KEYWORD ): Container size options (BeerCSS). Most alias to ‘responsive’; use ‘expand’ for full-width. 📝 Form Field Components Component Purpose FormField Render a single form input from column config FormModal Complete modal dialog for create/edit/view forms 💡 Use case: Auto-generated form fields and modals for CRUD operations. Integrates with FormGrid for layout. Column Form Config Each column can include a form key to customize its form field: { "key": "email", "label": "Email Address", "form": { "type": "email", # text, email, number, date, select, textarea, checkbox, hidden "required": True, "placeholder": "user@example.com", "options": [...], # For select type "disabled": False, "hidden": False } } ⚠️ Note: Currently uses a column config dict schema (compatible with DataTable). Could be expanded to accept simpler field specifications in the future. source FormField def FormField( col:dict, value:Any=None, mode:str='edit' )->Any: Render a single form field based on column config. Note: Currently uses DataTable column config schema. Could be expanded to accept simpler field specs in the future. FormModal Parameters Parameter Type Description columns list[dict] Column configs with form key mode str "view", "edit", or "create" record dict Current values (for view/edit) modal_id str HTML id for the modal title str Modal title (auto-generated from mode if None) save_url str URL for form submission (hx_post) save_target str Target element for save response cancel_url str URL for cancel action cancel_target str Target for cancel response form_layout Callable Custom layout: fn(fields_dict, mode, record) -> layout row_id_field str Field name for record ID indicator_id str Element ID for loading spinner Form Modes: - view: All fields read-only (disabled) - edit: Fields editable, prefilled with row data - create: Fields editable, empty form source FormModal def FormModal( columns:list, mode:str='view', record:dict=None, modal_id:str='form-modal', title:str=None, save_url:str=None, save_target:str=None, cancel_url:str=None, cancel_target:str=None, form_layout:Callable=None, row_id_field:str='id', indicator_id:str=None )->Any: Generate a modal dialog with form fields driven by column config. Uses FormGrid (single column by default) for field layout. Integrates with HTMX for form submission. 📦 Nav Container Component Purpose NavContainer Slide-out navigation drawer 💡 Use case: Mobile navigation menus, side drawers, off-canvas menus. source BottomNav def BottomNav( c:VAR_POSITIONAL, cls:str='bottom', size:str='s', kwargs:VAR_KEYWORD ): Mobile bottom navigation bar. source NavSubtitle def NavSubtitle( c:VAR_POSITIONAL, cls:str='small-text gray-text padding', kwargs:VAR_KEYWORD ): Navigation section subtitle label. source NavCloseLi def NavCloseLi( dialog_id:str, icon:str='close', cls:str='circle transparent', kwargs:VAR_KEYWORD ): Navigation close button. source NavDividerLi def NavDividerLi( cls:str='', kwargs:VAR_KEYWORD ): Navigation divider (horizontal rule). source NavHeaderLi def NavHeaderLi( c:VAR_POSITIONAL, cls:str='horizontal-padding', kwargs:VAR_KEYWORD ): Navigation header element. source NavContainer def NavContainer( li:VAR_POSITIONAL, title:NoneType=None, brand:NoneType=None, position:str='left', close_button:bool=True, cls:str='active', id:NoneType=None, kwargs:VAR_KEYWORD ): Slide-out navigation drawer with header and close button. Code def ex_navcontainer(): return NavContainer( Li(I('inbox'), Span('Inbox', cls='max'), B('24')), Li(I('send'), Span('Outbox')), Li(I('favorite'), Span('Favorites')), Li(I('delete'), Span('Trash')), Li(I('fiber_manual_record'), Span('Label')), Li(I('change_history'), Span('Label')), Li(I('stop'), Span('Label')), title='Title', brand='/favicon.png', id='main-nav' ) preview(ex_navcontainer()) 📑 Sidebar & Layout Component Purpose NavSideBarHeader Header section for sidebar NavSideBarContainer Full sidebar with navigation (HTMX SPA enabled) BottomNav Mobile bottom navigation bar Layout Complete page layout with sidebar, navbar, and mobile-responsive navigation 💡 Use case: App shells with persistent navigation, dashboard layouts. 📱 Mobile Responsive Navigation The Layout component automatically switches between desktop and mobile navigation: Screen Size Navigation Style Desktop (>992px) Left sidebar (NavSideBarContainer) visible Mobile (≤992px) Bottom nav (BottomNav) visible Both navigations use the same sidebar_links and share HTMX SPA attributes for consistent behavior. The main container uses horizontal-margin for symmetric spacing. 🚀 SPA Navigation (What App Developers Need to Know) The Layout, NavBar, and NavSideBarContainer components now include HTMX SPA navigation by default. Links inside the sidebar/navbar are automatically enhanced with hx-boost, so clicking them swaps only the #main-content area instead of reloading the entire page. Route Pattern Routes must check req.headers for HTMX requests to return just the content (not the full layout): @rt("/dashboard") def dashboard(req): content = dashboard_content() if 'HX-Request' in req.headers: return content # HTMX swap - just content return get_layout(content) # Full page load with Layout Active Link Highlighting Add cls='nav-link' to sidebar links for automatic active state highlighting: A(Icon('home'), Span('Home'), href='/', cls='nav-link') Include active_nav_script in your layout wrapper: active_nav_script = Script(""" function updateActiveNav() { document.querySelectorAll('.nav-link').forEach(link => { link.classList.toggle('active', link.getAttribute('href') === window.location.pathname); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateActiveNav); } else { updateActiveNav(); } document.body.addEventListener('htmx:afterSettle', updateActiveNav); """) def get_layout(content): return Div( Layout(content, sidebar_links=sidebar_items(), nav_bar=NavBar(...)), active_nav_script ) New Optional Parameters (backward-compatible) Parameter Default Description hx_boost True Auto-enhance links for HTMX navigation hx_target '#main-content' Target element for content swaps main_id 'main-content' ID for main content wrapper (Layout only) size 'small' Navbar thickness (NavBar only) source NavSideBarContainer def NavSideBarContainer( children:VAR_POSITIONAL, position:str='left', size:str='m', cls:str='', active:bool=False, hx_boost:bool=True, hx_target:str='#main-content', kwargs:VAR_KEYWORD ): BeerCSS navigation sidebar with HTMX SPA navigation defaults. Args: position: Sidebar position (‘left’ or ‘right’) size: Sidebar size (‘s’, ‘m’, ‘l’) active: Whether sidebar starts visible hx_boost: Auto-enhance all links for HTMX navigation (default True) hx_target: Target element for boosted links (default ‘#main-content’) Usage: Routes should check req.headers for HX-Request and return content only for HTMX requests: @rt("/dashboard") def dashboard(req): content = dashboard_content() if 'HX-Request' in req.headers: return content # HTMX swap return Layout(content) # Full page load source NavSideBarLinks def NavSideBarLinks( children:VAR_POSITIONAL, as_list:bool=False, cls:str='', kwargs:VAR_KEYWORD ): Container for navigation links (optional list wrapper). source NavSideBarHeader def NavSideBarHeader( c:VAR_POSITIONAL, cls:str='', kwargs:VAR_KEYWORD ): Sidebar header section for menu buttons and branding. Code def ex_navsidebarcontainer(): nav = NavSideBarContainer( NavSideBarHeader( NavToggleButton('#main-nav') ), A(I('home'), Span('Home')), A(I('dashboard'), Span('Dashboard')), A(I('settings'), Span('Settings')), A(I('help'), Span('Help')), A(I('info'), Span('About')), position='left', size='l', id='main-nav' ) content = Main( H2("Navigation Toggle"), H3("Content Area"), P("Click the menu button to toggle the navigation."), cls="responsive" ) return Div(nav, content) preview(ex_navsidebarcontainer()) source Layout def Layout( content:VAR_POSITIONAL, sidebar:NoneType=None, sidebar_links:NoneType=None, nav_bar:NoneType=None, container_size:ContainerT=<ContainerT.expand: 'responsive max'>, main_bg:str='surface', sidebar_id:str='app-sidebar', main_id:str='main-content', cls:str='', kwargs:VAR_KEYWORD ): App layout with HTMX SPA navigation and responsive mobile support. Args: main_id: ID for main content area (default ‘main-content’) - use as hx-target HTMX SPA features: - hx-boost on sidebar automatically enhances all links - hx-history-elt for back/forward button caching - Routes should check req.headers for HX-Request and return content only for HTMX requests Mobile Responsive: - Desktop (>992px): Left sidebar visible, bottom nav hidden - Mobile (≤992px): Bottom nav visible, sidebar hidden - Both navigations share the same sidebar_links for consistent behavior Usage: @rt(“/dashboard”) def dashboard(req): content = dashboard_content() if ‘HX-Request’ in req.headers: return content # HTMX swap return Layout(content) # Full page load source Page def Page( c:VAR_POSITIONAL, active:bool=True, position:NoneType=None, cls:str='', kwargs:VAR_KEYWORD ): BeerCSS animated page container. Pages are containers that can be a main page, multiple pages, or animated elements. Args: active: Show page (default True) position: Animation direction - ‘left’, ‘right’, ‘top’, ‘bottom’ (optional) cls: Additional classes Example: Page(H1(“Dashboard”), P(“Content here”)) # Default active page Page(content, position=‘right’) # Slide from right animation Code def nav_items(): """Returns navigation items for NavBar - no hx_* attrs needed, hx-boost handles it""" return [ A("Home", href='/'), A("Dashboard", href='/dashboard'), A("Cookies", href='/cookies'), A(Icon('light_mode'), cls='circle', onclick='toggleMode()', title='Toggle dark/light mode', style='margin-left: 1rem;'), ] def sidebar_items(): """Returns navigation items for NavSideBarContainer - no hx_* attrs needed, hx-boost handles it""" return [ A(Icon('home'), Span('Home'), href='/', cls='nav-link'), A(Icon('dashboard'), Span('Dashboard'), href='/dashboard', cls='nav-link'), A(Icon('cookie'), Span('Cookies'), href='/cookies', cls='nav-link'), A(Icon('logout'), Span('Logout'), href='/login', cls='nav-link'), ] # Script to highlight active nav link - uses BeerCSS 'active' class active_nav_script = Script(""" function updateActiveNav() { document.querySelectorAll('.nav-link').forEach(link => { link.classList.toggle('active', link.getAttribute('href') === window.location.pathname); }); } // Run on initial page load (after DOM is ready) if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateActiveNav); } else { updateActiveNav(); } // Run after HTMX swaps document.body.addEventListener('htmx:afterSettle', updateActiveNav); """) def get_layout(content): """App shell with HTMX SPA navigation.""" return Div( Layout( content, sidebar_links=sidebar_items(), nav_bar=NavBar(*nav_items(), brand=H3('Admin Panel'), sticky=True) ), active_nav_script ) Code # Content functions for each page def home_content(): return Div( H1("Home"), P("Welcome to the home page!", cls='grey-text'), cls='padding' ) def dashboard_content(): return Div( H1("Dashboard"), P("Welcome to the admin panel!", cls='grey-text'), Grid( Card(H6("Total Users"), H2("1,234"), cls='padding'), Card(H6("Active Sessions"), H2("456"), cls='padding'), Card(H6("Page Views"), H2("12.5K"), cls='padding'), Card(H6("Conversion Rate"), H2("3.2%"), cls='padding'), cols=4 # Now auto-derives: cols_sm=1, cols_md=2, cols_lg=4 ), Card( H5("Recent Activity"), Ul( Li("User john@example.com logged in"), Li("New order #1234 created"), Li("Payment processed for order #1233"), Li("User jane@example.com signed up") ), cls='padding margin-top' ), cls='padding' ) def cookies_content(): return Div( H1("Cookies Settings"), P("Manage your cookie preferences here.", cls='grey-text'), cls='padding' ) # Routes - check HX-Request header for HTMX detection @rt("/") def home(req): content = home_content() if 'HX-Request' in req.headers: return content return get_layout(content) @rt("/dashboard") def dashboard(req): content = dashboard_content() if 'HX-Request' in req.headers: return content return get_layout(content) @rt("/cookies") def cookies(req): content = cookies_content() if 'HX-Request' in req.headers: return content return get_layout(content) Code @rt('/test_layout') def test_layout(): return get_layout(dashboard_content()) Code preview(get_layout(dashboard_content())) 🔤 Typography Component Purpose TextT Enum of text style classes TextPresets Pre-configured text combinations CodeSpan, CodeBlock Code formatting Sup, Sub Superscript/subscript 💡 Use case: Consistent text styling, code snippets, mathematical notation. source TextPresets def TextPresets( args:VAR_POSITIONAL, kwds:VAR_KEYWORD ): Common typography presets combining multiple TextT values. source TextT def TextT( args:VAR_POSITIONAL, kwds:VAR_KEYWORD ): Text styles using BeerCSS typography classes. source Sup def Sup( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Superscript text. source Sub def Sub( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Subscript text. source Abbr def Abbr( c:VAR_POSITIONAL, title:str='', cls:tuple=(), kwargs:VAR_KEYWORD ): Abbreviation with title tooltip. source Mark def Mark( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Highlighted/marked text. source Small def Small( c:VAR_POSITIONAL, cls:str='small-text', kwargs:VAR_KEYWORD ): Small text element. source Strong def Strong( c:VAR_POSITIONAL, cls:str='bold', kwargs:VAR_KEYWORD ): Strong (bold) text. source Em def Em( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Emphasized text. source Q def Q( c:VAR_POSITIONAL, cls:str='italic large-text', kwargs:VAR_KEYWORD ): Styled inline quotation. source Blockquote def Blockquote( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Blockquote element for quotes. source CodeBlock def CodeBlock( c:VAR_POSITIONAL, cls:tuple=(), code_cls:tuple=(), kwargs:VAR_KEYWORD ): Block code with pre wrapper. source CodeSpan def CodeSpan( c:VAR_POSITIONAL, cls:tuple=(), kwargs:VAR_KEYWORD ): Inline code snippet. ❓ FAQ Component Purpose FAQItem Collapsible question/answer item 💡 Use case: Help pages, documentation, support sections. Note: For a complete FAQ section with title, use FAQSection from web_pages. source FAQItem def FAQItem( question:str, answer:str, question_cls:str='', answer_cls:str='' ): Collapsible FAQ item using details/summary. Atomic component for a single collapsible Q&A item. Use FAQSection from web_pages for a full FAQ section with title. Args: question: The question text answer: The answer text question_cls: Additional classes for question styling answer_cls: Additional classes for answer styling def ex_faq_item(): return Div( FAQItem("What is fh-matui?", "A small component layer for FastHTML."), FAQItem("How do I use FAQItem?", "Wrap multiple FAQItems in a column for a list."), cls="column small-space" ) preview(ex_faq_item()) 🍪 Cookies Banner Component Purpose CookiesBanner GDPR-compliant cookie consent banner 💡 Use case: Cookie consent, privacy compliance, user preference collection. source CookiesBanner def CookiesBanner( message:str='We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.', accept_text:str='Accept', decline_text:str='Decline', settings_text:NoneType=None, policy_link:str='/cookies', policy_text:str='Learn more', position:str='bottom', on_accept:str='console.log("Accepted")', on_decline:str='console.log("Declined")', on_settings:str='console.log("Settings")', cls:str='', kwargs:VAR_KEYWORD ): GDPR-compliant cookie consent banner with accept/decline actions. Code def get_CookiesBanner(): return CookiesBanner() preview(get_CookiesBanner()) 💬 BlockQuote 💡 Use case: Quotations, testimonials, highlighted text excerpts. Code def ex_other(): return Article( Blockquote("This is a blockquote element"), CodeBlock("#This is a CodeBlock element\n\ndef add(a,b): return a+b"), cls="padding") preview(ex_other()) 🔤 TextT Examples Preview of all TextT enum values applied to text. Code def ex_textt(): return Article( Grid(*[Div(P(f"This is {s.name} text", cls=s.value)) for s in TextT]), cls="padding") preview(ex_textt()) 🎨 Text Presets Examples Preview of all TextPresets enum values applied to text. Code def ex_textpresets(): return Article( Grid(*[Div(P(f"This is {preset.name} text", cls=preset.value)) for preset in TextPresets]), cls="padding") preview(ex_textpresets()) 📝 Headings Examples Preview of heading hierarchy (H1-H6) with Titled component. Code def ex_headings(): return Article( DivVStacked( Titled("Titled"), H1("Level 1 Heading (H1)"), H2("Level 2 Heading (H2)"), H3("Level 3 Heading (H3)"), H4("Level 4 Heading (H4)"), H5("Level 5 Heading (H5)"), H6("Level 6 Heading (H6)"), ), cls="padding") preview(ex_headings()) Code def ex_semantic_elements(): return Article( H2("Semantic HTML Elements Demo"), # Text formatting examples P("Here's an example of ", Em("emphasized (Em)"), " and ", Strong("strong (Strong)"), " text."), P("Some ", I("italic text (I)"), " and ", Small("smaller text (Small)"), " in a paragraph."), P("You can ", Mark("highlight (Mark)"), " text, show ", Del("deleted (Del)"), " and ", Ins("inserted (Ins)"), " content."), P("Chemical formulas use ", Sub("subscripts (Sub)"), " and ", Sup("superscripts (Sup)"), " like H", Sub("2"), "O."), # Quote examples Blockquote( P("The only way to do great work is to love what you do."), Cite("Steve Jobs (Cite)")), P("As Shakespeare wrote, ", Q("All the world's a stage (Q)"), "."), # Time and Address P("Posted on ", Time("2024-01-29", datetime="2024-01-29")), Address( "Mozilla Foundation (Address)", Br(), "331 E Evelyn Ave (Address)", Br(), "Mountain View, CA 94041 (Address)", Br(), "USA (Address)"), # Technical and definition examples P( Dfn("HTML (Dfn)"), " (", Abbr("HyperText Markup Language (Abbr)", title="HyperText Markup Language"), ") is the standard markup language for documents designed to be displayed in a web browser."), P("Press ", Kbd("Ctrl (Kbd)"), " + ", Kbd("C (Kbd)"), " to copy."), P("The command returned: ", Samp("Hello, World! (Samp)")), P("Let ", Var("x (Var)"), " be the variable in the equation."), # Figure with caption Figure( # PicSumImg(), Caption("Figure 1: An example image with caption (Caption)")), # Interactive elements Details( Summary("Click to show more information (Summary)"), P("This is the detailed content that is initially hidden (P)")), # Data representation P( Data("123 (Data)", value="123"), " is a number, and here's a Meter showing progress: ", Meter(value=0.6, min=0, max=1)), P( "Temperature: ", Meter(value=-1, min=-10, max=40, low=0, high=30, optimum=21), " (with low/high/optimum values)"), P( Data("€42.00", value="42"), " - price example with semantic value"), # Output example P("Form calculation result: ", Output("The sum is 42 (Output)", form="calc-form", for_="num1 num2")), # Meta information example Section( H3("Blog Post Title (H3)"), Small("By John Doe • 5 min read (Small)"), P("Article content here...")), # Text decoration examples P("This text has ",U("proper name annotation (U)"), " and this is ",S("outdated information (S)"), " that's been superseded."), cls='padding' ) preview(ex_semantic_elements()) fh-matui fh-matui 📱 App Pages ⚙️ Core fh-matui 🔧 Foundations ⚙️ Core 🧩 Components 📱 App Pages 🌐 Web Pages 📊 Data Tables 💳 Billing Components 🧩 Components 🧩 Components – fh-matui 🧩 Components – fh-matui 🧩 Components – fh-matui fh-matui Material Design components for FastHTML using BeerCSS Material Design components for FastHTML using BeerCSS