Input group

Compose inputs or textareas with addons, actions, hints, menus, and validation.

Account reference

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

let defaultInputGroup =
    InputGroup.create "account-reference" "accountReference" "Account reference"
    |> InputGroup.render

On this page

Installation

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

dotnet fve add input-group --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 defaultInputGroup =
    InputGroup.create "account-reference" "accountReference" "Account reference"
    |> InputGroup.render

Text addons

Budget

Whole dollars or decimals are accepted.

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

let currencyInputGroup =
    InputGroup.create "budget-amount" "budgetAmount" "Budget"
    |> InputGroup.withValue "1250"
    |> InputGroup.withAddon (InputGroupAddon.text InputGroupPosition.Leading "$")
    |> InputGroup.withAddon (InputGroupAddon.text InputGroupPosition.Trailing "USD")
    |> InputGroup.withDescription "Whole dollars or decimals are accepted."
    |> InputGroup.render

Icon and keyboard hint

Search accounts

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

let searchInputGroup =
    InputGroup.create "account-search" "query" "Search accounts"
    |> InputGroup.withInputType InputType.Search
    |> InputGroup.withAddon (InputGroupAddon.icon InputGroupPosition.Leading (raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.95 3.69l3.18 3.18a.75.75 0 1 1-1.06 1.06l-3.18-3.18A7 7 0 0 1 2 9Z" clip-rule="evenodd"/></svg>"""))
    |> InputGroup.withAddon (InputGroupAddon.keyboard InputGroupPosition.Trailing "⌘ K")
    |> InputGroup.render

Textarea footer

Message

48 / 2,000

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

let textareaInputGroup =
    InputGroup.create "message-draft" "message" "Message"
    |> InputGroup.asTextarea 4
    |> InputGroup.withValue "The September close is ready for review."
    |> InputGroup.withFooter (div { _class "contents"; span { _class "text-xs text-[var(--fve-muted-text)]"; "48 / 2,000" }; Button.create (ButtonContent.Text "Send") |> Button.withColor ButtonColor.Primary |> Button.withVariant ButtonVariant.Solid |> Button.withSize ControlSize.Small |> Button.render })
    |> InputGroup.render

Validation

Routing number

Enter a nine-digit routing number.

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

let invalidInputGroup =
    InputGroup.create "routing-number" "routingNumber" "Routing number"
    |> InputGroup.withValidation "Enter a nine-digit routing number."
    |> InputGroup.withAddon (InputGroupAddon.text InputGroupPosition.Leading "US")
    |> InputGroup.render

Pending

Domain

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

let pendingInputGroup =
    InputGroup.create "verified-domain" "domain" "Domain"
    |> InputGroup.withValue "fve.meiermade.com"
    |> InputGroup.pending
    |> InputGroup.withAddon (InputGroupAddon.text InputGroupPosition.Trailing "Checking…")
    |> InputGroup.render

API reference

type InputGroupPosition =
    | Leading
    | Trailing

type InputGroupControl =
    | Input of InputType
    | Textarea of int

type InputGroupAddon

type InputGroupConfig

/// Decorative addons are not focus targets or form values.
/// Interactive addons require accessible names and keep native Tab order.
/// Controls and addons wrap when their preferred widths no longer fit; footers keep their own row.
module InputGroup =
    val create : id:string -> name:string -> label:string -> InputGroupConfig
    val withInputType : kind:InputType -> config:InputGroupConfig -> InputGroupConfig
    val asTextarea : rows:int -> config:InputGroupConfig -> InputGroupConfig
    val withValue : value:string -> config:InputGroupConfig -> InputGroupConfig
    val withAddon : addon:InputGroupAddon -> config:InputGroupConfig -> InputGroupConfig
    val withFooter : footer:HtmlElement -> config:InputGroupConfig -> InputGroupConfig
    val withDescription : description:string -> config:InputGroupConfig -> InputGroupConfig
    val withValidation : message:string -> config:InputGroupConfig -> InputGroupConfig
    val required : config:InputGroupConfig -> InputGroupConfig
    val disabled : config:InputGroupConfig -> InputGroupConfig
    val pending : config:InputGroupConfig -> InputGroupConfig
    val withAttributes : attributes:HtmlAttribute list -> config:InputGroupConfig -> InputGroupConfig
    val render : config:InputGroupConfig -> HtmlElement

module InputGroupAddon =
    val text : position:InputGroupPosition -> value:string -> InputGroupAddon
    val icon : position:InputGroupPosition -> icon:HtmlElement -> InputGroupAddon
    val keyboard : position:InputGroupPosition -> hint:string -> InputGroupAddon
    val action : position:InputGroupPosition -> action:HtmlElement -> InputGroupAddon