Field

Own labels, descriptions, validation, orientation, and custom form-control composition.

Reference

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

let defaultField =
    Field.create "reference" "Reference"
    |> Field.render (fun attributes ->
        input {
            for attribute in attributes do attribute
            _name "reference"
            _class "min-h-[var(--fve-control-min-height)] w-full rounded-[var(--fve-radius-control)] border border-[var(--fve-border)] bg-[var(--fve-surface)] px-3 focus-visible:outline-2 focus-visible:outline-[var(--fve-brand-ring)]"
        })

On this page

Installation

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

dotnet fve add field --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 defaultField =
    Field.create "reference" "Reference"
    |> Field.render (fun attributes ->
        input {
            for attribute in attributes do attribute
            _name "reference"
            _class "min-h-[var(--fve-control-min-height)] w-full rounded-[var(--fve-radius-control)] border border-[var(--fve-border)] bg-[var(--fve-surface)] px-3 focus-visible:outline-2 focus-visible:outline-[var(--fve-brand-ring)]"
        })

Custom control

Adjustment amount

Enter the amount before fees.

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

let customCurrencyField =
    Field.create "adjustment-amount" "Adjustment amount"
    |> Field.withDescription "Enter the amount before fees."
    |> Field.required
    |> Field.render (fun attributes ->
        input {
            for attribute in attributes do attribute
            _name "adjustmentAmount"
            _type "number"
            _step "0.01"
            _class "min-h-[var(--fve-control-min-height)] w-full rounded-[var(--fve-radius-control)] border border-[var(--fve-border)] bg-[var(--fve-surface)] px-3 focus-visible:outline-2 focus-visible:outline-[var(--fve-brand-ring)]"
        })

Responsive label and control rows

Legal name

Matches the account owner record.

Tax reference

Enter the nine-character reference.

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

let responsiveFieldRows =
    div {
        _class "grid gap-4"
        Field.create "legal-name" "Legal name"
        |> Field.withLayout FieldLayout.Responsive
        |> Field.withDescription "Matches the account owner record."
        |> Field.render (fun attributes -> input { for attribute in attributes do attribute; _name "legalName"; _class "min-h-10 w-full rounded-md border border-[var(--fve-border)] bg-[var(--fve-surface)] px-3" })
        Field.create "tax-reference" "Tax reference"
        |> Field.withLayout FieldLayout.Responsive
        |> Field.withValidation "Enter the nine-character reference."
        |> Field.render (fun attributes -> input { for attribute in attributes do attribute; _name "taxReference"; _class "min-h-10 w-full rounded-md border border-[var(--fve-critical-ring)] bg-[var(--fve-surface)] px-3" })
    }

Semantic fieldset

Delivery preferences

Choose one or both delivery methods.

Email receipt

Paper receipt

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

let groupedFields =
    FieldGroup.create "Delivery preferences" (div { _class "grid gap-3"; Checkbox.create "emailDelivery" "Email receipt" |> Checkbox.withChecked true |> Checkbox.render; Checkbox.create "paperDelivery" "Paper receipt" |> Checkbox.render })
    |> FieldGroup.withDescription "Choose one or both delivery methods."
    |> FieldGroup.render

API reference

type FieldLayout =
    | Vertical
    | Horizontal
    | Responsive

type FieldConfig

/// Use Field for custom controls. Complete controls such as Input, Textarea and Checkbox
/// already own their labels and must not be nested inside another Field wrapper.
module Field =
    val create : id:string -> label:string -> FieldConfig
    val withDescription : description:string -> config:FieldConfig -> FieldConfig
    val withValidation : message:string -> config:FieldConfig -> FieldConfig
    val withLayout : layout:FieldLayout -> config:FieldConfig -> FieldConfig
    val required : config:FieldConfig -> FieldConfig
    val disabled : config:FieldConfig -> FieldConfig
    val pending : config:FieldConfig -> FieldConfig
    val withAttributes : attributes:HtmlAttribute list -> config:FieldConfig -> FieldConfig
    val render : control:(HtmlAttribute list -> HtmlElement) -> config:FieldConfig -> HtmlElement