Skip to main content

Item

Compose structured list rows with media, content, metadata, links, and actions.

Quarterly close

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultItem =
    ul { Item.create "Quarterly close" |> Item.render }

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add item --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultItem =
    ul { Item.create "Quarterly close" |> Item.render }

Links and action rows

Quarterly close
Review reconciliation notes and unresolved balances.
Sep 30
Export package
Prepared for the finance review.
Ready

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let itemExample =
    ul {
        _class "grid max-w-xl gap-2"
        Item.create "Quarterly close"
        |> Item.withDescription (p { "Review reconciliation notes and unresolved balances." })
        |> Item.withMetadata (time { _datetime "2026-09-30"; "Sep 30" })
        |> Item.withVariant ItemVariant.Outlined
        |> Item.withLink "/components/page-examples/account-management"
        |> Item.render
        Item.create "Export package"
        |> Item.withDescription (p { "Prepared for the finance review." })
        |> Item.withMetadata (Badge.create "Ready" |> Badge.withColor BadgeColor.Success |> Badge.render)
        |> Item.withActions (Button.create (ButtonContent.Text "Download") |> Button.withVariant ButtonVariant.Ghost |> Button.render)
        |> Item.withVariant ItemVariant.Muted
        |> Item.render
    }

Linked row with metadata action

Operating account
Account name
This local example does not save changes.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let linkedItemWithMetadata =
    let editor =
        Popover.create "item-account-editor" "Edit" (span { "Edit" }) "Edit account name" (
            div {
                _class "grid gap-3"
                Input.create "item-account-name" "Account name" |> Input.withValue "Operating account" |> Input.render
                p { _class "text-sm text-[var(--fve-muted-text)]"; "This local example does not save changes." }
            })
        |> Popover.focusContentOnOpen
        |> Popover.render
    ul {
        _class "w-full max-w-xl"
        Item.create "Operating account"
        |> Item.withLink "/examples/application/accounts/101"
        |> Item.withMetadata editor
        |> Item.withVariant ItemVariant.Outlined
        |> Item.render
    }

API reference

type ItemVariant =
    | Plain
    | Outlined
    | Muted

type ItemConfig

/// withLink stretches the title link without wrapping media, descriptions or metadata in an anchor.
/// Supplied slot interactions remain independent. An explicit action cluster keeps the Item plain.
module Item =
    val create : title:string -> ItemConfig
    val withDescription : description:HtmlElement -> config:ItemConfig -> ItemConfig
    val withMedia : media:HtmlElement -> config:ItemConfig -> ItemConfig
    val withMetadata : metadata:HtmlElement -> config:ItemConfig -> ItemConfig
    val withActions : actions:HtmlElement -> config:ItemConfig -> ItemConfig
    val withLink : href:string -> config:ItemConfig -> ItemConfig
    val withVariant : variant:ItemVariant -> config:ItemConfig -> ItemConfig
    val withAttributes : attributes:HtmlAttribute list -> config:ItemConfig -> ItemConfig
    val render : config:ItemConfig -> HtmlElement