htmxRazor

https://htmxrazor.com/
Admin
htmxRazor is a library of server-rendered UI components for ASP.NET Core, providing first-class htmx...
Tokens:53,698
Snippets:630
Trust Score:3.5
Update:4 months ago
Show doc for...
Tokens:
Raw
### Open Drawer from the Start

Source: https://htmxrazor.com/Docs/Components/Drawer

This example shows how to open a drawer from the start (left side) of the viewport. It features a button to trigger the drawer and a navigation menu within the drawer.

```html
<rhx-button rhx-variant="outline"
            data-rhx-drawer-open="start-drawer">
    Open Start Drawer
</rhx-button>

<rhx-drawer id="start-drawer" rhx-label="Navigation"
            rhx-placement="start">
    <nav style="display: flex; flex-direction: column; gap: var(--rhx-space-sm);">
        <a href="#">Dashboard</a>
        <a href="#">Settings</a>
        <a href="#">Profile</a>
        <a href="#">Help</a>
    </nav>
</rhx-drawer>
```

--------------------------------

### Percentage Formatting Examples

Source: https://htmxrazor.com/Docs/Components/FormatNumber

Illustrates formatting numbers as percentages, with control over fraction digits.

```html
<rhx-format-number rhx-value="0.75" rhx-type="percent" />
<rhx-format-number rhx-value="0.756" rhx-type="percent"
                   rhx-maximum-fraction-digits="1" />
```

--------------------------------

### Basic Select Example

Source: https://htmxrazor.com/Docs/Components/Select

A basic example of a select component populated with items from a server-side list.

```html
<rhx-select rhx-label="Country" name="country"
           rhx-placeholder="Choose a country"
           rhx-items="Model.Countries" />
```

--------------------------------

### Tab Placements Example

Source: https://htmxrazor.com/Docs/Components/Tabs

Showcases different placements for tab groups: bottom, start (vertical), and end (vertical).

```html
<!-- Bottom -->
<rhx-tab-group rhx-placement="bottom">
    <rhx-tab rhx-panel="b-one" rhx-active="true">Tab One</rhx-tab>
    <rhx-tab rhx-panel="b-two">Tab Two</rhx-tab>
    <rhx-tab-panel rhx-name="b-one" rhx-active="true">
        <p>Bottom placement content.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="b-two">
        <p>Tab two content.</p>
    </rhx-tab-panel>
</rhx-tab-group>

<!-- Start (vertical) -->
<rhx-tab-group rhx-placement="start">
    <rhx-tab rhx-panel="s-one" rhx-active="true">Dashboard</rhx-tab>
    <rhx-tab rhx-panel="s-two">Analytics</rhx-tab>
    <rhx-tab rhx-panel="s-three">Reports</rhx-tab>
    <rhx-tab-panel rhx-name="s-one" rhx-active="true">
        <p>Dashboard overview.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="s-two">
        <p>Analytics panel.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="s-three">
        <p>Reports section.</p>
    </rhx-tab-panel>
</rhx-tab-group>

<!-- End (vertical) -->
<rhx-tab-group rhx-placement="end">
    <rhx-tab rhx-panel="e-one" rhx-active="true">Info</rhx-tab>
    <rhx-tab rhx-panel="e-two">Details</rhx-tab>
    <rhx-tab-panel rhx-name="e-one" rhx-active="true">
        <p>Info panel content.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="e-two">
        <p>Details panel content.</p>
    </rhx-tab-panel>
</rhx-tab-group>
```

--------------------------------

### Currency Formatting Examples

Source: https://htmxrazor.com/Docs/Components/FormatNumber

Shows how to format numbers as currency with different currency codes and display options.

```html
<rhx-format-number rhx-value="1234.56" rhx-type="currency" rhx-currency="USD" />
<rhx-format-number rhx-value="1234.56" rhx-type="currency" rhx-currency="USD"
                   rhx-currency-display="code" />
<rhx-format-number rhx-value="1234.56" rhx-type="currency" rhx-currency="USD"
                   rhx-currency-display="name" />
<rhx-format-number rhx-value="1234" rhx-type="currency" rhx-currency="JPY" />
<rhx-format-number rhx-value="1234.56" rhx-type="currency" rhx-currency="EUR" />
<rhx-format-number rhx-value="1234.56" rhx-type="currency" rhx-currency="GBP" />
```

--------------------------------

### Basic Combobox Example

Source: https://htmxrazor.com/Docs/Components/Combobox

A basic example of a combobox bound to a server-side list of cities.

```html
<rhx-combobox rhx-label="City" name="city"
           rhx-placeholder="Search cities..."
           rhx-items="Model.Cities" />
```

--------------------------------

### Content Placeholder Example

Source: https://htmxrazor.com/Docs/Components/Skeleton

A comprehensive example showing how to use skeleton components to create a content placeholder layout, including text and image placeholders. This is ideal for simulating complex UI structures during loading.

```html
<div style="display: flex; gap: var(--rhx-space-md); align-items: center;">
    <rhx-skeleton rhx-shape="circle" rhx-width="48px" rhx-height="48px" />
    <div style="flex: 1; display: flex; flex-direction: column; gap: var(--rhx-space-xs);">
        <rhx-skeleton rhx-width="60%" rhx-height="16px" />
        <rhx-skeleton rhx-width="40%" rhx-height="12px" />
    </div>
</div>
<rhx-skeleton rhx-width="100%" rhx-height="80px" />
<rhx-skeleton rhx-width="75%" rhx-height="16px" />
```

--------------------------------

### Basic Tabs Example

Source: https://htmxrazor.com/Docs/Components/Tabs

Demonstrates a standard tab group with general, profile, and notification settings.

```html
<rhx-tab-group aria-label="Account settings">
    <rhx-tab rhx-panel="general" rhx-active="true">General</rhx-tab>
    <rhx-tab rhx-panel="profile">Profile</rhx-tab>
    <rhx-tab rhx-panel="notifications">Notifications</rhx-tab>
    <rhx-tab-panel rhx-name="general" rhx-active="true">
        <p>General account settings.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="profile">
        <p>Profile settings.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="notifications">
        <p>Notification preferences.</p>
    </rhx-tab-panel>
</rhx-tab-group>
```

--------------------------------

### Toast Container Setup

Source: https://htmxrazor.com/Docs/Components/Toast

Place a single `<rhx-toast-container>` in your layout file to manage all toast notifications. This example shows configuration for position, maximum visible toasts, and default duration.

```html
<!-- Place once in your _Layout.cshtml -->
<rhx-toast-container rhx-position="top-end"
                     rhx-max="5"
                     rhx-duration="5000" />
```

--------------------------------

### Basic Pagination Component

Source: https://htmxrazor.com/Docs/Components/Pagination

A basic example of the `<rhx-pagination>` component, starting from page 5. It relies on `rhx-total-pages` to determine the total number of pages available.

```html
<rhx-pagination rhx-current-page="@Model.CurrentPage"
                 rhx-total-pages="20"
                 hx-get="/items"
                 hx-target="#results"
                 hx-swap="innerHTML" />
```

--------------------------------

### Decimal Formatting Examples

Source: https://htmxrazor.com/Docs/Components/FormatNumber

Demonstrates different ways to format numbers as decimals, including grouping and controlling fraction digits.

```html
<rhx-format-number rhx-value="1234.56" />
<rhx-format-number rhx-value="1234.56" rhx-no-grouping="true" />
<rhx-format-number rhx-value="1.5" rhx-minimum-fraction-digits="0"
                   rhx-maximum-fraction-digits="3" />
<rhx-format-number rhx-value="1.0" rhx-minimum-fraction-digits="2"
                   rhx-maximum-fraction-digits="2" />
```

--------------------------------

### Manual Activation Tabs Example

Source: https://htmxrazor.com/Docs/Components/Tabs

Configures tabs for manual activation, allowing users to navigate with arrow keys and select with Enter/Space.

```html
<rhx-tab-group rhx-activation="manual">
    <rhx-tab rhx-panel="m-one" rhx-active="true">First</rhx-tab>
    <rhx-tab rhx-panel="m-two">Second</rhx-tab>
    <rhx-tab rhx-panel="m-three">Third</rhx-tab>
    <rhx-tab-panel rhx-name="m-one" rhx-active="true">
        <p>Use arrow keys to move focus, then Enter/Space to select.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="m-two">
        <p>Second tab content.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="m-three">
        <p>Third tab content.</p>
    </rhx-tab-panel>
</rhx-tab-group>
```

--------------------------------

### Radial Select Component Example

Source: https://htmxrazor.com/Roadmap

Demonstrates the usage of the rhx-radial-select component, including how to define categories and link them to htmx GET requests for dynamic content loading.

```html
<rhx-radial-select name="FoodItem" rhx-category-name="Category"
                   rhx-placeholder="Choose an item…" aria-label="Food category">
    <rhx-radial-option rhx-value="fruit" rhx-label="Fruit" rhx-icon="apple"
                       rhx-color="danger" hx-get="/Menu?handler=Items&cat=fruit" />
    <rhx-radial-option rhx-value="meat"  rhx-label="Meat"  rhx-icon="grid"
                       rhx-color="success" hx-get="/Menu?handler=Items&cat=meat" />
</rhx-radial-select>
```

--------------------------------

### Basic QR Code Example

Source: https://htmxrazor.com/Docs/Components/QrCode

Generates a basic QR code for a given URL. This is the simplest way to use the component.

```html
<rhx-qr-code rhx-value="https://example.com"
              rhx-label="Example website" />
```

--------------------------------

### Basic Button Example

Source: https://htmxrazor.com/Docs/Components/Button

A basic rhx-button with a neutral variant. This is a fundamental example of how to render the button component.

```html
<rhx-button rhx-variant="neutral">Button</rhx-button>
```

--------------------------------

### Basic Wizard Example

Source: https://htmxrazor.com/Docs/Components/Wizard

A three-step wizard with automatic Previous/Next navigation using htmx. This snippet demonstrates the basic structure for defining wizard steps.

```html
<rhx-wizard rhx-current-step="1" page="/Docs/Components/Wizard">
    <rhx-wizard-step rhx-title="Account" rhx-status="current">
        <h3>Create Account</h3>
        <rhx-input name="username" rhx-label="Username" />
    </rhx-wizard-step>
    <rhx-wizard-step rhx-title="Profile" rhx-description="Personal info">
        <h3>Your Profile</h3>
        <rhx-input name="fullName" rhx-label="Full Name" />
    </rhx-wizard-step>
    <rhx-wizard-step rhx-title="Confirm">
        <h3>Review &amp; Confirm</h3>
        <p>Please review your information before submitting.</p>
    </rhx-wizard-step>
</rhx-wizard>
```

--------------------------------

### Basic Details Component

Source: https://htmxrazor.com/Docs/Components/Details

A basic example of the rhx-details component displaying a summary and content.

```html
<rhx-details rhx-summary="What is htmxRazor?">
    <p>htmxRazor is an ASP.NET Core component library built with
       Razor Tag Helpers and first-class htmx integration.</p>
</rhx-details>
```

--------------------------------

### Basic Dialog Example

Source: https://htmxrazor.com/Docs/Components/Dialog

Demonstrates a simple dialog with a title and a close button. It can be opened using a trigger button.

```html
<rhx-button rhx-variant="brand"
            data-rhx-dialog-open="demo-dialog">
    Open Dialog
</rhx-button>

<rhx-dialog id="demo-dialog" rhx-label="Example Dialog">
    <p>This is a basic dialog with a title and close button.</p>
    <p>Press ESC or click the close button to dismiss.</p>
</rhx-dialog>
```

--------------------------------

### SignalR Service and Hub Setup

Source: https://htmxrazor.com/Docs/Components/SignalR

Configures SignalR services and maps the SignalR hub endpoint in the application's startup code.

```csharp
// Program.cs
builder.Services.AddSignalR();

var app = builder.Build();
app.MapHub<ChatHub>("/chatHub");
```

--------------------------------

### Basic Popup Example

Source: https://htmxrazor.com/Docs/Components/Popup

Demonstrates a basic popup anchored to a button. Uses rhx-position.js for smart placement. The popup is toggled by clicking the anchor button.

```html
<div style="position: relative;">
    <button class="rhx-button rhx-button--neutral" id="popup-anchor"
            onclick="
                var p = document.getElementById('demo-popup');
                p.hidden = !p.hidden;
                p.classList.toggle('rhx-popup--active');
            ">Toggle Popup</button>
    <rhx-popup rhx-anchor="#popup-anchor"
               rhx-placement="bottom-start"
               id="demo-popup">
        <div style="padding: var(--rhx-space-md);
                    background: var(--rhx-color-surface);
                    border: var(--rhx-border-width) solid var(--rhx-color-border);
                    border-radius: var(--rhx-radius-md);
                    box-shadow: var(--rhx-shadow-lg);
                    min-width: 12rem;">
            <p>Positioned popup content.</p>
        </div>
    </rhx-popup>
</div>
```

--------------------------------

### Disabled Split Panel Example

Source: https://htmxrazor.com/Docs/Components/SplitPanel

Creates a split panel where the divider is disabled, preventing any resizing. The start panel is fixed at 60% and the end panel at 40%.

```html
<rhx-split-panel rhx-position="60" rhx-disabled>
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <p>Fixed start panel (60%).</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <p>Fixed end panel (40%).</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>
```

--------------------------------

### Contained Drawer Example

Source: https://htmxrazor.com/Docs/Components/Drawer

This example shows a drawer that opens within a specified container, rather than the entire viewport. It's useful for sidebars or contextual panels.

```html
<div style="position: relative; height: 300px;
     border: var(--rhx-border-width) solid var(--rhx-color-border);
     border-radius: var(--rhx-radius-md); overflow: hidden;">
    <div style="padding: var(--rhx-space-lg);">
        <rhx-button rhx-variant="outline" rhx-size="small"
                    data-rhx-drawer-open="contained-drawer">
            Toggle Sidebar
        </rhx-button>
        <p>Main content area. The drawer opens within this container.</p>
    </div>

    <rhx-drawer id="contained-drawer" rhx-label="Filters"
                rhx-placement="start" rhx-contained>
        <label><input type="checkbox" /> Active</label>
        <label><input type="checkbox" /> Pending</label>
        <label><input type="checkbox" /> Archived</label>
    </rhx-drawer>
</div>
```

--------------------------------

### htmx Integration Examples

Source: https://htmxrazor.com/Docs/Components/Button

Shows how to integrate rhx-button with htmx for dynamic actions like loading content or deleting items. Requires htmx to be loaded.

```html
<rhx-button rhx-variant="brand"
            hx-get="/Docs/Components/Button?handler=Greeting"
            hx-target="#result" hx-swap="innerHTML">
    Load Greeting
</rhx-button>

<rhx-button rhx-variant="danger" rhx-appearance="outlined"
            hx-delete="/Docs/Components/Button?handler=DeleteItem&amp;id=42"
            hx-confirm="Are you sure?"
            hx-target="#result" hx-swap="innerHTML">
    Delete Item
</rhx-button>
```

--------------------------------

### Card Gallery Scroller Example

Source: https://htmxrazor.com/Docs/Components/Scroller

Use this example to create a horizontally scrollable card gallery. Each card has a fixed width, allowing the row to extend beyond the viewport.

```html
<rhx-scroller rhx-orientation="horizontal">
    <div style="display: flex; gap: var(--rhx-space-lg);
                padding: var(--rhx-space-md);">
        <rhx-card style="flex: 0 0 280px;">
            <rhx-card-header><h3>Card 1</h3></rhx-card-header>
            <p>Card content here.</p>
            <rhx-card-footer>
                <rhx-button rhx-variant="ghost" rhx-size="small">View</rhx-button>
            </rhx-card-footer>
        </rhx-card>
        <!-- ... more cards ... -->
    </div>
</rhx-scroller>
```

--------------------------------

### Dialog with Footer Example

Source: https://htmxrazor.com/Docs/Components/Dialog

Illustrates a dialog with a footer containing action buttons like 'Cancel' and 'Save Changes'. Includes an input field.

```html
<rhx-button rhx-variant="brand"
            data-rhx-dialog-open="edit-dialog">
    Open Dialog with Footer
</rhx-button>

<rhx-dialog id="edit-dialog" rhx-label="Edit Profile">
    <rhx-input rhx-label="Display Name"
               rhx-placeholder="Enter name"
               name="displayName" />

    <rhx-dialog-footer>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined"
                    onclick="this.closest('dialog').close()">
            Cancel
        </rhx-button>
        <rhx-button rhx-variant="brand"
                    onclick="this.closest('dialog').close()">
            Save Changes
        </rhx-button>
    </rhx-dialog-footer>
</rhx-dialog>
```

--------------------------------

### Small QR Code Example

Source: https://htmxrazor.com/Docs/Components/QrCode

Generates a small QR code by specifying a smaller `rhx-size`. Useful for limited space.

```html
<rhx-qr-code rhx-value="https://example.com"
              rhx-label="Small QR code"
              rhx-size="64" />
```

--------------------------------

### Headerless Dialog Example

Source: https://htmxrazor.com/Docs/Components/Dialog

Shows a dialog without a header, suitable for confirmation prompts. It includes cancel and confirm buttons.

```html
<rhx-button data-rhx-dialog-open="confirm-dialog">
    Open Headerless Dialog
</rhx-button>

<rhx-dialog id="confirm-dialog" rhx-no-header="true">
    <p>Are you sure you want to proceed?</p>
    <rhx-button rhx-variant="neutral"
                onclick="this.closest('dialog').close()">
        Cancel
    </rhx-button>
    <rhx-button rhx-variant="brand"
                onclick="this.closest('dialog').close()">
        Confirm
    </rhx-button>
</rhx-dialog>
```

--------------------------------

### Basic Dropdown Example

Source: https://htmxrazor.com/Docs/Components/Dropdowns

A standard dropdown with actions like Edit, Duplicate, and Archive. Includes a disabled item.

```html
<rhx-dropdown>
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="neutral" rhx-appearance="outlined">
            Actions &#9662;
        </rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Edit</rhx-dropdown-item>
    <rhx-dropdown-item>Duplicate</rhx-dropdown-item>
    <rhx-dropdown-divider />
    <rhx-dropdown-item>Archive</rhx-dropdown-item>
    <rhx-dropdown-item rhx-disabled="true">Delete</rhx-dropdown-item>
</rhx-dropdown>
```

--------------------------------

### Server Clock Example

Source: https://htmxrazor.com/Docs/Components/SignalR

Connects to a SignalR hub and updates its content with server-pushed timestamps every 2 seconds. A spinner is shown while waiting for the connection.

```html
<!-- Server pushes a timestamp every 2 seconds -->
<rhx-signalr hub-url="/demoHub" rhx-method="ServerClock"
             rhx-connection-state="true">
    <rhx-spinner rhx-size="small" />
</rhx-signalr>
```

--------------------------------

### Basic Time Picker Example

Source: https://htmxrazor.com/Docs/Components/TimePicker

A basic time picker with a placeholder and a 30-minute step. The hidden value is committed in ISO HH:mm format.

```html
<rhx-time-picker name="StartTime" rhx-placeholder="Pick a time…" rhx-step="30" />
```

--------------------------------

### Closable Tabs Example

Source: https://htmxrazor.com/Docs/Components/Tabs

Implements tabs that can be closed by the user. When a tab is closed, the next tab automatically activates.

```html
<rhx-tab-group>
    <rhx-tab rhx-panel="c-one" rhx-active="true" rhx-closable="true">Document 1</rhx-tab>
    <rhx-tab rhx-panel="c-two" rhx-closable="true">Document 2</rhx-tab>
    <rhx-tab rhx-panel="c-three" rhx-closable="true">Document 3</rhx-tab>
    <rhx-tab-panel rhx-name="c-one" rhx-active="true">
        <p>Document 1 content. Close this tab to see the next one activate.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="c-two">
        <p>Document 2 content.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="c-three">
        <p>Document 3 content.</p>
    </rhx-tab-panel>
</rhx-tab-group>
```

--------------------------------

### Line Sparkline Examples

Source: https://htmxrazor.com/Docs/Components/Sparkline

Demonstrates default line sparklines, custom stroke colors and widths, and custom dimensions. Ensure rhx-values is provided for data visualization.

```html
<!-- Default line sparkline -->
<rhx-sparkline rhx-values="new[] { 23, 45, 67, 34, 56, 78, 45, 89 }"
               rhx-label="CPU history" />
```

```html
<!-- Custom stroke color and width -->
<rhx-sparkline rhx-values="new[] { 142.5, 145.2, 143.8, 148.1, 150.6 }"
               rhx-stroke-color="#6366f1"
               rhx-stroke-width="3"
               rhx-label="Stock price trend" />
```

```html
<!-- Custom size -->
<rhx-sparkline rhx-values="new[] { 18, 19, 21, 24, 26, 28, 30, 29 }"
               rhx-width="300px"
               rhx-height="3rem"
               rhx-stroke-color="#f59e0b"
               rhx-label="Daily temperatures" />
```

--------------------------------

### Basic Date & Time Picker Usage

Source: https://htmxrazor.com/Docs/Components/DateTimePicker

This snippet shows the basic integration of the `<rhx-datetime-picker>` component. It configures a placeholder and sets the starting day of the week to Monday, with time options stepping every 30 minutes.

```html
<rhx-datetime-picker name="StartsAt" rhx-placeholder="Pick date & time…" rhx-step="30" rhx-week-start="mon" />
```

--------------------------------

### Disabled Tab Example

Source: https://htmxrazor.com/Docs/Components/Tabs

Demonstrates how to create a disabled tab using the 'rhx-disabled' attribute. Disabled tabs are not clickable or focusable.

```html
<rhx-tab-group>
    <rhx-tab rhx-panel="d-one" rhx-active="true">Active</rhx-tab>
    <rhx-tab rhx-panel="d-two" rhx-disabled="true">Disabled</rhx-tab>
    <rhx-tab rhx-panel="d-three">Available</rhx-tab>
    <rhx-tab-panel rhx-name="d-one" rhx-active="true">
        <p>The "Disabled" tab cannot be clicked or focused via keyboard.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="d-two">
        <p>This content is unreachable via the disabled tab.</p>
    </rhx-tab-panel>
    <rhx-tab-panel rhx-name="d-three">
        <p>Available tab content.</p>
    </rhx-tab-panel>
</rhx-tab-group>
```

--------------------------------

### Optimistic Rating Example

Source: https://htmxrazor.com/Docs/Components/Optimistic

Implement optimistic updates for rating components. Stars update instantly upon click, and the rating reverts if the server rejects the submission.

```html
<rhx-rating name="score" rhx-label="Rate this"
             rhx-optimistic="true"
             hx-post="/api/rating"
             hx-trigger="change" hx-swap="none" />
```

--------------------------------

### Vertical Split Panel Example

Source: https://htmxrazor.com/Docs/Components/SplitPanel

Shows a vertical split panel, suitable for editor/output layouts. The divider is set to 40% and the orientation is vertical.

```html
<rhx-split-panel rhx-position="40" rhx-vertical>
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Editor</h4>
            <p>Code or text editing area.</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Output</h4>
            <p>Console or preview area below the editor.</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>
```

--------------------------------

### Horizontal Split Panel Example

Source: https://htmxrazor.com/Docs/Components/SplitPanel

Demonstrates a basic horizontal split panel with a sidebar and main content area. The initial divider position is set to 30%.

```html
<rhx-split-panel rhx-position="30">
    <rhx-split-start>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Sidebar</h4>
            <p>Navigation or filter panel. Drag the divider to resize.</p>
        </div>
    </rhx-split-start>
    <rhx-split-end>
        <div style="padding: var(--rhx-space-lg);">
            <h4 style="margin:0 0 var(--rhx-space-sm) 0;">Main Content</h4>
            <p>Primary content area. The end panel takes the remaining space.</p>
        </div>
    </rhx-split-end>
</rhx-split-panel>
```

--------------------------------

### Basic Animated Image

Source: https://htmxrazor.com/Docs/Components/AnimatedImage

Displays an animated image or video from a given URL. The animation starts playing automatically by default.

```html
<rhx-animated-image
    rhx-src="https://media.giphy.com/media/xT9IgzoKnwFNmISR8I/giphy.gif"
    rhx-alt="Animated loading" />
```

--------------------------------

### Optimistic Switch Example

Source: https://htmxrazor.com/Docs/Components/Optimistic

Use `rhx-optimistic` on a switch to provide immediate visual feedback for toggling settings like dark mode. The UI reverts if the server returns an error.

```html
<rhx-switch name="darkMode" rhx-label="Dark mode"
            rhx-optimistic="true"
            hx-post="/api/settings/darkMode"
            hx-trigger="change" hx-swap="none" />
```

--------------------------------

### Determinate Progress Bar Values

Source: https://htmxrazor.com/Docs/Components/ProgressBar

Use these examples to display progress bars with specific completion percentages. Each bar can have a custom accessible label.

```html
<rhx-progress-bar rhx-value="0" rhx-label="Not started" />
<rhx-progress-bar rhx-value="25" rhx-label="Quarter complete" />
<rhx-progress-bar rhx-value="65" rhx-label="Upload progress" />
<rhx-progress-bar rhx-value="100" rhx-label="Complete" />
```

--------------------------------

### Button States (Disabled and Loading)

Source: https://htmxrazor.com/Docs/Components/Button

Examples of buttons in disabled and loading states. The loading state displays a spinner and disables interaction.

```html
<rhx-button rhx-variant="brand" rhx-disabled="true">Disabled</rhx-button>
<rhx-button rhx-variant="brand" rhx-loading="true">Loading</rhx-button>
```

--------------------------------

### Basic Card Example

Source: https://htmxrazor.com/Docs/Components/Card

A standard card with a header, body content, and a footer containing buttons. Suitable for product listings or general information display.

```html
<rhx-card>
    <rhx-card-header><h3 style="margin:0;">Product Name</h3></rhx-card-header>
    <p>A short description of the product. Great for showcasing items in a grid layout.</p>
    <rhx-card-footer>
        <rhx-button rhx-variant="brand" rhx-size="small">Buy Now</rhx-button>
        <rhx-button rhx-variant="ghost" rhx-size="small">Details</rhx-button>
    </rhx-card-footer>
</rhx-card>
```

--------------------------------

### htmx Integration for Sorting and Pagination

Source: https://htmxrazor.com/Docs/Components/DataTable

This example shows how to integrate htmx with the data table for dynamic sorting and pagination. The server handles requests and returns partial views to update the table content.

```html
<!-- The table is in a partial view: _DataTablePartial.cshtml -->
<div id="htmx-table-container">
    @await Html.PartialAsync("_DataTablePartial", state)
</div>

<!-- Partial re-renders the full table on each request -->
<!-- Sort buttons and pagination target #htmx-table-container -->
<!-- Server handler uses DataTableRequest model binder: -->
public IActionResult OnGetTableData(DataTableRequest request)
{
    // sort, filter, paginate...
    return Partial("_DataTablePartial", state);
}
```

--------------------------------

### Interactive Kanban Board Example

Source: https://htmxrazor.com/Docs/Components/Kanban

This snippet shows the basic structure of an interactive Kanban board with columns and cards. It includes htmx attributes for handling card drops and server updates.

```html
<rhx-kanban>
    <rhx-kanban-column rhx-column-id="todo" rhx-title="To Do">
        <rhx-kanban-card rhx-card-id="1"
                         hx-post="/Board?handler=Move"
                         hx-target="#board" hx-swap="innerHTML">
            Design homepage
        </rhx-kanban-card>
    </rhx-kanban-column>
    <rhx-kanban-column rhx-column-id="doing" rhx-title="In Progress"
                       rhx-max-cards="3" />
    <rhx-kanban-column rhx-column-id="done" rhx-title="Done" />
</rhx-kanban>
```

--------------------------------

### Vertical Divider Example

Source: https://htmxrazor.com/Docs/Components/Divider

This snippet demonstrates how to render a vertical divider, typically used within flex containers to separate adjacent items.

```html
<div style="display: flex; align-items: stretch; height: 48px; gap: var(--rhx-space-md);">
    <span>Left</span>
    <rhx-divider rhx-vertical />
    <span>Right</span>
</div>
```

--------------------------------

### Optimistic Button Example

Source: https://htmxrazor.com/Docs/Components/Optimistic

Enhance button interactions with optimistic loading states. The button visually indicates it's processing the request immediately after being clicked, reverting on server error.

```html
<rhx-button rhx-variant="brand" rhx-optimistic="true"
            hx-post="/api/like"
            hx-swap="none">
    Like
</rhx-button>
```

--------------------------------

### Basic Date Range Picker with Presets

Source: https://htmxrazor.com/Docs/Components/DateRangePicker

This snippet shows a basic implementation of the Date Range Picker with predefined preset options for quick selection. It configures the names for the start and end date fields and sets a placeholder.

```html
<rhx-date-range-picker rhx-start-name="From" rhx-end-name="To"
                       rhx-presets="today,last7,thismonth,last30" rhx-placeholder="Pick a range…" />
```

--------------------------------

### Date Picker with Min/Max Range

Source: https://htmxrazor.com/Docs/Components/DatePicker

This example demonstrates how to restrict the selectable date range using `rhx-min` and `rhx-max` properties. Dates outside this ISO-formatted range will be disabled.

```html
<rhx-date-picker name="d" rhx-min="2026-01-01" rhx-max="2026-12-31" />
```

--------------------------------

### Toast Variants

Source: https://htmxrazor.com/Docs/Components/Toast

Static examples demonstrating the different visual variants available for toasts: neutral, brand, success, warning, and danger. These show the rendered HTML structure.

```html
<!-- Toasts are typically created via server-side helpers.
     These static examples show the rendered HTML structure. -->
<rhx-toast rhx-variant="neutral">This is a neutral notification.</rhx-toast>
<rhx-toast rhx-variant="brand">New feature available!</rhx-toast>
<rhx-toast rhx-variant="success">Item saved successfully!</rhx-toast>
<rhx-toast rhx-variant="warning">Your session expires in 5 minutes.</rhx-toast>
<rhx-toast rhx-variant="danger">Failed to delete the item.</rhx-toast>
```

--------------------------------

### Card with Image Example

Source: https://htmxrazor.com/Docs/Components/Card

A card that includes an image at the top, followed by a header, body content, and a footer. Ideal for visual content like articles or featured items.

```html
<rhx-card>
    <rhx-card-image rhx-src="https://picsum.photos/640/360" rhx-alt="Random photo" />
    <rhx-card-header><h3 style="margin:0;">Featured Article</h3></rhx-card-header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
    <rhx-card-footer>
        <rhx-button rhx-variant="ghost" rhx-size="small">Read More</rhx-button>
    </rhx-card-footer>
</rhx-card>
```

--------------------------------

### Basic Command Palette with Static Results

Source: https://htmxrazor.com/Docs/Components/CommandPalette

Demonstrates a basic command palette with predefined static pages. Use this for a fixed set of navigation items.

```html
<rhx-button rhx-variant="neutral" rhx-appearance="outlined"
            onclick="document.getElementById('basic-cp').removeAttribute('hidden');
                     document.getElementById('basic-cp').querySelector('input').focus();">
    Open Palette
</rhx-button>

<rhx-command-palette id="basic-cp" rhx-label="Quick search">
    <rhx-command-group rhx-heading="Pages">
        <rhx-command-item rhx-value="home" rhx-href="/" rhx-icon="home">
            Home
        </rhx-command-item>
        <rhx-command-item rhx-value="getting-started" rhx-href="/Docs/GettingStarted" rhx-icon="file">
            Getting Started
        </rhx-command-item>
    </rhx-command-group>
    <rhx-command-group rhx-heading="Components">
        <rhx-command-item rhx-value="button" rhx-href="/Docs/Components/Button" rhx-icon="cursor">
            Button
        </rhx-command-item>
        <rhx-command-item rhx-value="dialog" rhx-href="/Docs/Components/Dialog" rhx-icon="layers">
            Dialog
        </rhx-command-item>
    </rhx-command-group>
</rhx-command-palette>
```

--------------------------------

### Server-Side: OOB Swap (C#)

Source: https://htmxrazor.com/Docs/Components/Toast

An alternative server-side method for custom toast content. The server renders the full `<rhx-toast>` HTML and returns it for an out-of-band swap into the toast container. This example shows returning a danger toast with a specified duration.

```csharp
// Return a toast via out-of-band swap:
public IActionResult OnPostDelete()
{
    // ... delete logic ...
    return this.HxToastOob("Item deleted", "danger", duration: 3000);
}
```

--------------------------------

### Visually Hidden Live Region for Screen-Reader-Only Announcements

Source: https://htmxrazor.com/Docs/Components/LiveRegion

This example utilizes `rhx-visually-hidden="true"` to create a live region that is not visible on screen but will announce content to screen readers. It's useful for status updates that don't require visual presentation.

```html
<!-- Screen reader only — no visual output -->
<rhx-live-region rhx-visually-hidden="true" id="sr-status">
    3 results found
</rhx-live-region>
```

--------------------------------

### Multiple FAQ Details Components

Source: https://htmxrazor.com/Docs/Components/Details

Demonstrates using multiple rhx-details components to create an FAQ section.

```html
<rhx-details rhx-summary="How do I install htmxRazor?">
    <p>Add the NuGet package and register the tag helpers
       in _ViewImports.cshtml.</p>
</rhx-details>
<rhx-details rhx-summary="Does it work with htmx?">
    <p>Yes! Every component supports hx-get, hx-post,
       hx-trigger, hx-target, and hx-swap attributes.</p>
</rhx-details>
<rhx-details rhx-summary="Is it accessible?">
    <p>htmxRazor uses semantic HTML, ARIA attributes,
       and keyboard navigation throughout all components.</p>
</rhx-details>
```

--------------------------------

### Add htmxRazor NuGet Package

Source: https://htmxrazor.com/Docs/GettingStarted

Install the htmxRazor NuGet package using the .NET CLI.

```bash
dotnet add package htmxRazor
```

--------------------------------

### Use htmxRazor Button Component

Source: https://htmxrazor.com/

Example of using the rhx-button component with htmx attributes for data loading.

```html
<rhx-button rhx-variant="brand" hx-get="/api/data" hx-target="#result">
    Load Data
</rhx-button>
```

--------------------------------

### Switch Sizes

Source: https://htmxrazor.com/Docs/Components/Switch

Demonstrates how to set the visual size of the switch component.

```html
<rhx-switch name="sw-sm" rhx-label="Small switch" rhx-size="small" />
<rhx-switch name="sw-md" rhx-label="Medium switch (default)" />
<rhx-switch name="sw-lg" rhx-label="Large switch" rhx-size="large" />
```

--------------------------------

### Horizontal Divider Example

Source: https://htmxrazor.com/Docs/Components/Divider

Use this snippet to add a standard horizontal visual separator between content elements.

```html
<p>Content above the divider.</p>
<rhx-divider />
<p>Content below the divider.</p>
```

--------------------------------

### Progress Ring with Various Values

Source: https://htmxrazor.com/Docs/Components/ProgressRing

Demonstrates how to set different progress values and accessible labels for the progress ring.

```html
<rhx-progress-ring rhx-value="0" rhx-label="Not started" />
<rhx-progress-ring rhx-value="25" rhx-label="Quarter" />
<rhx-progress-ring rhx-value="65" rhx-label="Upload" />
<rhx-progress-ring rhx-value="100" rhx-label="Complete" />
```

--------------------------------

### Disabled Tooltip Example

Source: https://htmxrazor.com/Docs/Components/Tooltip

Demonstrates how to disable a tooltip using the rhx-disabled attribute. A disabled tooltip will not appear on interaction.

```html
<rhx-tooltip rhx-content="This tooltip is disabled" rhx-disabled="true">
    <rhx-button rhx-variant="neutral">Hover (no tooltip)</rhx-button>
</rhx-tooltip>
```

--------------------------------

### Dropdown Placements

Source: https://htmxrazor.com/Docs/Components/Dropdowns

Demonstrates different placements for the dropdown menu: bottom-start, bottom-end, and top-start.

```html
<rhx-dropdown rhx-placement="bottom-start">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Bottom Start &#9662;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-placement="bottom-end">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Bottom End &#9662;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>

<rhx-dropdown rhx-placement="top-start">
    <rhx-dropdown-trigger>
        <rhx-button rhx-variant="brand">Top Start &#9652;</rhx-button>
    </rhx-dropdown-trigger>
    <rhx-dropdown-item>Item A</rhx-dropdown-item>
    <rhx-dropdown-item>Item B</rhx-dropdown-item>
</rhx-dropdown>
```

--------------------------------

### Link Buttons

Source: https://htmxrazor.com/Docs/Components/Button

Examples of rhx-button used as a link. It can navigate to internal or external URLs and supports target attributes.

```html
<rhx-button rhx-variant="brand" rhx-href="/about">Navigate</rhx-button>
<rhx-button rhx-variant="neutral" rhx-appearance="outlined"
            rhx-href="https://github.com" rhx-target="_blank">
    External Link
</rhx-button>
```

--------------------------------

### Basic Tooltip Usage

Source: https://htmxrazor.com/Docs/Components/Tooltip

Demonstrates the basic usage of the rhx-tooltip component with different rhx-content and rhx-placement attributes.

```html
<rhx-tooltip rhx-content="Save your changes">
    <rhx-button rhx-variant="brand">Save</rhx-button>
</rhx-tooltip>

<rhx-tooltip rhx-content="Delete this item permanently" rhx-placement="bottom">
    <rhx-button rhx-variant="danger">Delete</rhx-button>
</rhx-tooltip>

<rhx-tooltip rhx-content="Edit settings" rhx-placement="right">
    <rhx-button rhx-variant="neutral" rhx-appearance="outlined">Settings</rhx-button>
</rhx-tooltip>
```

--------------------------------

### No Overflow Scroller Example

Source: https://htmxrazor.com/Docs/Components/Scroller

This snippet demonstrates a horizontal scroller where the content does not exceed the container width, effectively showing no overflow.

```html
<rhx-scroller rhx-orientation="horizontal">
    <div style="display: flex; gap: var(--rhx-space-md);
                padding: var(--rhx-space-md);">
        <div class="scroll-item">A</div>
        <div class="scroll-item">B</div>
        <div class="scroll-item">C</div>
    </div>
</rhx-scroller>
```

--------------------------------

### Select Component Sizes

Source: https://htmxrazor.com/Docs/Components/Select

Illustrates the different size variants (small, medium, large) available for the select component.

```html
<rhx-select rhx-label="Small" rhx-size="small"
           rhx-placeholder="Small" rhx-items="Model.Cities" name="sel-sm" />
<rhx-select rhx-label="Medium (default)"
           rhx-placeholder="Medium" rhx-items="Model.Cities" name="sel-md" />
<rhx-select rhx-label="Large" rhx-size="large"
           rhx-placeholder="Large" rhx-items="Model.Cities" name="sel-lg" />
```

--------------------------------

### Server-Side State Tracking for Wizard

Source: https://htmxrazor.com/Docs/Components/Wizard

Demonstrates how to track wizard step progress across requests using `WizardState` and `WizardSessionExtensions`. This C# code handles the logic for updating and persisting the wizard's state on the server.

```csharp
public IActionResult OnPostWizardNext(int step)
{
    var state = TempData.GetWizardState("checkout");
    state.MarkComplete(state.CurrentStep);
    state.CurrentStep = step;
    TempData.SetWizardState("checkout", state);

    return Partial("_WizardPartial", state);
}
```

--------------------------------

### Indeterminate Progress Bar

Source: https://htmxrazor.com/Docs/Components/ProgressBar

Use this example for progress bars where the exact completion percentage is unknown, such as during initial loading or background processing.

```html
<rhx-progress-bar rhx-indeterminate="true" rhx-label="Loading" />
```

--------------------------------

### Popup with Arrow Example

Source: https://htmxrazor.com/Docs/Components/Popup

Shows a popup with a directional arrow pointing to its anchor. The popup and its arrow are toggled by clicking the anchor button.

```html
<div style="position: relative;">
    <button class="rhx-button rhx-button--brand" id="popup-arrow-anchor"
            onclick="
                var p = document.getElementById('demo-popup-arrow');
                p.hidden = !p.hidden;
                p.classList.toggle('rhx-popup--active');
            ">Toggle Popup with Arrow</button>
    <rhx-popup rhx-anchor="#popup-arrow-anchor"
               rhx-placement="bottom"
               rhx-arrow="true"
               id="demo-popup-arrow">
        <div style="padding: var(--rhx-space-md);
                    background: var(--rhx-color-surface);
                    border: var(--rhx-border-width) solid var(--rhx-color-border);
                    border-radius: var(--rhx-radius-md);
                    box-shadow: var(--rhx-shadow-lg);
                    min-width: 12rem;">
            <p>This popup has a directional arrow.</p>
        </div>
    </rhx-popup>
</div>
```

--------------------------------

### Icon Sizes

Source: https://htmxrazor.com/Docs/Components/Icon

Demonstrates how to set different sizes for the icon component. Available sizes are small, medium (default), and large.

```html
<rhx-icon rhx-name="star" rhx-size="small" />
<rhx-icon rhx-name="star" />
<rhx-icon rhx-name="star" rhx-size="large" />
```

--------------------------------

### Model Binding with Checkbox

Source: https://htmxrazor.com/Docs/Components/Checkbox

Example of using the `rhx-for` property for model binding with ASP.NET Core. This enables two-way data binding.

```html
<rhx-checkbox rhx-for="AgreeToTerms"
               rhx-label="Agree to Terms" />
```

--------------------------------

### Basic Before/After Image Comparison

Source: https://htmxrazor.com/Docs/Components/Comparison

Displays a basic image comparison slider using provided 'before' and 'after' image URLs and their alt texts.

```html
<rhx-comparison
    rhx-before="https://picsum.photos/id/10/600/400"
    rhx-before-alt="Original photo"
    rhx-after="https://picsum.photos/id/10/600/400?grayscale"
    rhx-after-alt="Grayscale version" />
```

--------------------------------

### Vertical Scroller Example

Source: https://htmxrazor.com/Docs/Components/Scroller

Implement a vertically scrollable container with this snippet. It's ideal for long lists or content that requires a fixed height.

```html
<rhx-scroller rhx-orientation="vertical" style="height: 200px;">
    <div style="padding: var(--rhx-space-md);">
        <div>List item 1</div>
        <div>List item 2</div>
        <!-- ... more items ... -->
        <div>List item 30</div>
    </div>
</rhx-scroller>
```

--------------------------------

### Input Types

Source: https://htmxrazor.com/Docs/Components/Input

Demonstrates different input types for specific data formats like email, password, and numbers. Select the type that matches the expected input.

```html
<rhx-input rhx-label="Email" rhx-type="email"
           rhx-placeholder="name@example.com" name="email" />
<rhx-input rhx-label="Password" rhx-type="password"
           rhx-placeholder="Enter password" name="password" />
<rhx-input rhx-label="Number" rhx-type="number"
           rhx-placeholder="0" name="number" />
```
Tokens:
Raw