Tag input
Free-form tags
Type any tag and press Enter or Add tag. Duplicate and empty values are rejected explicitly.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let tagInputExample =
TagInput.create "ledger-tags" "tags" "Tags" [ "reviewed"; "quarter-end" ]
|> TagInput.withDescription "Type any tag and press Enter or Add tag. Duplicate and empty values are rejected explicitly."
|> TagInput.renderValidation
Add at least one classification.
Add a tag before continuing.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let invalidTagInputExample =
TagInput.create "required-tags" "requiredTags" "Required tags" []
|> TagInput.withDescription "Add at least one classification."
|> TagInput.withValidation "Add a tag before continuing."
|> TagInput.renderPending
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let pendingTagInputExample =
TagInput.create "pending-tags" "pendingTags" "Updating tags" [ "reviewed" ]
|> TagInput.pending
|> TagInput.renderDisabled
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let disabledTagInputExample =
TagInput.create "disabled-tags" "disabledTags" "Unavailable tags" [ "archived" ]
|> TagInput.disabled
|> TagInput.render