Field group

An independently installable component. Its content and surrounding layout remain consumer-owned.

Delivery preferences

Choose how to receive your receipt.

Email receipt

Paper receipt

open FSharp.ViewEngine
open Acme.Components
open type Html

let fields =
    FieldGroup.create "Delivery preferences" (div { _class "grid gap-3"; Checkbox.create "emailReceipt" "Email receipt" |> Checkbox.render; Checkbox.create "paperReceipt" "Paper receipt" |> Checkbox.render })
    |> FieldGroup.withDescription "Choose how to receive your receipt." |> FieldGroup.render

On this page

dotnet fve add field-group --config src/Acme.Components/fve.json

open FSharp.ViewEngine
open Acme.Components
open type Html

let fields =
    FieldGroup.create "Delivery preferences" (div { _class "grid gap-3"; Checkbox.create "emailReceipt" "Email receipt" |> Checkbox.render; Checkbox.create "paperReceipt" "Paper receipt" |> Checkbox.render })
    |> FieldGroup.withDescription "Choose how to receive your receipt." |> FieldGroup.render

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

type FieldGroupConfig

module FieldGroup =
    val create : legend:string -> content:HtmlElement -> FieldGroupConfig
    val withDescription : description:string -> config:FieldGroupConfig -> FieldGroupConfig
    val withLayout : layout:FieldLayout -> config:FieldGroupConfig -> FieldGroupConfig
    val withAttributes : attributes:HtmlAttribute list -> config:FieldGroupConfig -> FieldGroupConfig
    val render : config:FieldGroupConfig -> HtmlElement

Field group

Related fields