Tailwind Plus Elements

FSharp.ViewEngine covers all 23 custom elements published by Tailwind Plus Elements 1.0.22, a framework-independent library for the interactive behavior in Tailwind Plus HTML components.

On this page

Overview

FSharp.ViewEngine covers all 23 custom elements published by Tailwind Plus Elements 1.0.22, a framework-independent library for the interactive behavior in Tailwind Plus HTML components.

Setup

Install Elements in the application and open the TailwindElements type when building views:

npm install @tailwindplus/[email protected]

import '@tailwindplus/elements'

open FSharp.ViewEngine
open type Html
open type TailwindElements

For applications without a JavaScript build pipeline, load the pinned module from a CDN:

script {
    _src "https://cdn.jsdelivr.net/npm/@tailwindplus/[email protected]"
    _type "module"
}

Elements targets modern browsers supported by Tailwind CSS v4: Chrome 111+, Safari 16.4+, and Firefox 128+.

This page loads the pinned Elements 1.0.22 runtime, so each Preview tab below renders and operates the actual custom elements emitted by the F# builders.

Shared Attributes

Use the Elements-specific helpers for popover positioning. Anchor values follow the official grammar, such as bottom start.

elPopover {
    _popover
    _anchor "bottom start"
    _anchorStrategy "fixed"
}

Invoker commands and other platform attributes already belong to Html. Use helpers such as _command, _commandfor, _popovertarget, _open, and _hidden alongside the custom element builders.

Transition state attributes such as data-closed, data-enter, and data-leave are managed by Elements and should be treated as read-only styling hooks.

Autocomplete

Combine elAutocomplete, elOptions, elOption, and elSelectedContent with native form controls.

elAutocomplete {
    input { _name "user" }
    button {
        _type "button"
        elSelectedContent { "Choose a user" }
    }
    elOptions {
        _popover
        _anchor "bottom start"
        elOption { _value "wade"; "Wade Cooper" }
        elOption { _value "jane"; "Jane Doe" }
    }
}

Command Palette

Use elCommandPalette with its list, defaults, grouping, empty-state, and preview helpers.

elCommandPalette {
    _name "command"
    input { _autofocus true; _placeholder "Search…" }
    elCommandList {
        elDefaults { button { _type "button"; "Recent command" } }
        elCommandGroup {
            button { _id "open-file"; _type "button"; "Open file" }
        }
    }
    elNoResults { _hidden true; "No results found." }
    elCommandPreview { _for "open-file"; "Open a file" }
}

Copy Button

Wrap copyable text with elCopyable and target it with the standard invoker-command helpers.

elCopyable {
    _id "install-command"
    "dotnet add package FSharp.ViewEngine"
}
button {
    _type "button"
    _command "--copy"
    _commandfor "install-command"
    "Copy"
}

Dialog

Nest a native dialog inside elDialog, then use elDialogBackdrop and elDialogPanel for transitionable presentation.

button {
    _type "button"
    _command "show-modal"
    _commandfor "delete-profile"
    "Delete profile"
}
elDialog {
    dialog {
        _id "delete-profile"
        elDialogBackdrop { _class "fixed inset-0 bg-black/50" }
        elDialogPanel {
            form {
                _method "dialog"
                p { "Delete this profile?" }
                button {
                    _type "button"
                    _command "close"
                    _commandfor "delete-profile"
                    "Cancel"
                }
                button { _type "submit"; "Delete" }
            }
        }
    }
}

Disclosure

Pair elDisclosure with show, hide, or toggle invoker commands.

button {
    _type "button"
    _command "--toggle"
    _commandfor "answer"
    "Show answer"
}
elDisclosure {
    _id "answer"
    _hidden true
    "The answer is 42."
}

Use elDropdown to connect a native trigger button with an anchored elMenu.

elDropdown {
    button { _type "button"; "Options" }
    elMenu {
        _popover
        _anchor "bottom start"
        button { _type "button"; "Edit" }
        button { _type "button"; "Delete" }
    }
}

Use elPopover for arbitrary floating content and elPopoverGroup to keep related popovers open while focus moves within the group.

elPopoverGroup {
    button {
        _type "button"
        _popovertarget "account-menu"
        "Account"
    }
    elPopover {
        _id "account-menu"
        _popover
        _anchor "bottom end"
        _anchorStrategy "fixed"
        "Account options"
    }
}

Select

Build an accessible custom select with elSelect, elSelectedContent, elOptions, and elOption.

elSelect {
    _name "status"
    _value "active"
    button {
        _type "button"
        elSelectedContent { "Active" }
    }
    elOptions {
        _popover
        _anchor "bottom start"
        elOption { _value "active"; "Active" }
        elOption { _value "inactive"; "Inactive" }
        elOption { _value "archived"; "Archived" }
    }
}

Tabs

Place native tab buttons in elTabList and corresponding direct-child panels in elTabPanels.

elTabGroup {
    elTabList {
        button { _type "button"; "Account" }
        button { _type "button"; "Security" }
    }
    elTabPanels {
        div { "Account settings" }
        div { _hidden true; "Security settings" }
    }
}

Runtime Readiness

If application JavaScript needs to call component methods, first check customElements.get or wait for the elements:ready window event. Rendering helpers only produce markup; they do not install or initialize the Elements runtime.