Input
With label
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let labelledInput =
Input.create "exampleEmail" "Email"
|> Input.withType InputType.Email
|> Input.withAttributes [ _placeholder "[email protected]"; _autocomplete "email" ]
|> Input.renderConsistent control sizes
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let private refreshIcon =
raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path fill-rule="evenodd" d="M15.312 4.683A7.25 7.25 0 1 0 17.25 10a.75.75 0 0 0-1.5 0 5.75 5.75 0 1 1-1.604-3.982H12.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 .75-.75v-3.5a.75.75 0 0 0-1.5 0v1.415Z" clip-rule="evenodd"/></svg>"""
let inputSizeExamples =
div {
_class "grid min-w-0 gap-6"
for size, name in [ ControlSize.Small, "Compact"; ControlSize.Medium, "Standard"; ControlSize.Large, "Large" ] do
div {
_class (ControlSize.className size + " flex flex-wrap items-end gap-3")
Input.create ("sizing-" + name) (name + " search")
|> Input.withType InputType.Search
|> Input.render
Select.create ("sizing-type-" + name) (name + " type") id [ Select.option "all" "All types" ]
|> Select.withSelected "all"
|> Select.render
div {
_class "flex flex-wrap items-center gap-3"
Button.create (name + " action") |> Button.render
IconButton.create (name + " refresh") refreshIcon |> IconButton.render
}
}
div {
_class (ControlSize.className ControlSize.Small + " flex flex-wrap items-end gap-3")
Input.create "override-search" "Larger search in a compact region"
|> Input.withType InputType.Search
|> Input.withSize ControlSize.Large
|> Input.render
Select.create "override-type" "Larger type" id [ Select.option "all" "All types" ]
|> Select.withSelected "all" |> Select.withSize ControlSize.Large |> Select.render
div {
_class "flex flex-wrap items-center gap-3"
Button.create "Larger action" |> Button.withSize ControlSize.Large |> Button.render
IconButton.create "Larger refresh" refreshIcon |> IconButton.withSize ControlSize.Large |> IconButton.render
}
}
}Small, Medium and Large use 32, 40 and 48px baselines. Small uses compact 14px/20px application text; Medium and Large use 16px/24px text. Values use regular weight, actions medium, and field labels remain 14px. Set a region with ControlSize.className, or set an application theme with ComponentsTheme.withControlSize. Explicit withSize overrides inherit neither the region size nor layout density.
With help text
We will use this address for account updates.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let inputWithHelp =
Input.create "helpEmail" "Email"
|> Input.withType InputType.Email
|> Input.withDescription "We will use this address for account updates."
|> Input.withAttributes [ _placeholder "[email protected]"; _autocomplete "email" ]
|> Input.renderRequired
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let requiredInput =
Input.create "requiredEmail" "Email"
|> Input.withType InputType.Email
|> Input.required
|> Input.renderOptional
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let optionalInput =
Input.create "company" "Company (optional)"
|> Input.withAttributes [ _autocomplete "organization" ]
|> Input.renderWith validation error
Enter a valid email address.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let invalidInput =
Input.create "invalidEmail" "Email"
|> Input.withType InputType.Email
|> Input.withValue "not-an-email"
|> Input.withValidation "Enter a valid email address."
|> Input.renderWith leading icon
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let emailIcon =
raw """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5A2.25 2.25 0 0 1 19.5 19.5h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0-8.578 5.498a2.25 2.25 0 0 1-2.344 0L2.25 6.75"/></svg>"""
let inputWithIcon =
Input.create "iconEmail" "Email"
|> Input.withType InputType.Email
|> Input.withLeadingIcon emailIcon
|> Input.withAttributes [ _placeholder "[email protected]" ]
|> Input.renderWith prefix
https://
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let inputWithPrefix =
Input.create "website" "Website"
|> Input.withPrefix "https://"
|> Input.withAttributes [ _placeholder "fve.meiermade.com"; _autocomplete "off" ]
|> Input.renderWith suffix
USD
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let inputWithSuffix =
Input.create "price" "Price"
|> Input.withSuffix "USD"
|> Input.withAttributes [ _inputmode "decimal"; _placeholder "0.00" ]
|> Input.renderSearch with clear action
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let searchInputExample =
Input.create "query" "Search"
|> Input.withId "field-search"
|> Input.withType InputType.Search
|> Input.withAttributes [ _placeholder "Search…"; _autocomplete "off" ]
|> Input.renderDisabled
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let disabledInput =
Input.create "disabledEmail" "Email"
|> Input.withValue "[email protected]"
|> Input.disabled
|> Input.renderPending
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let pendingInput =
Input.create "pendingEmail" "Email"
|> Input.withValue "[email protected]"
|> Input.pending
|> Input.render