Checkbox
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 basicCheckbox =
Checkbox.create "emailUpdates" "Email me product updates"
|> Checkbox.renderWith help text
Add a short overview at the beginning of the report.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let checkboxWithHelp =
Checkbox.create "includeSummary" "Include a summary"
|> Checkbox.withDescription "Add a short overview at the beginning of the report."
|> Checkbox.renderRequired confirmation with validation
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let private choiceSubmitButton id (label:string) =
Button.create label
|> Button.withVariant ButtonVariant.Primary
|> Button.asSubmit
|> Button.withAttributes [ _id id ]
|> Button.render
let private choiceResult id result =
output {
_id id
_role "status"
_class "block min-h-5 text-sm text-[var(--fve-muted-text)]"
defaultArg result "Submit this ordinary form to see the server-owned result."
}
let checkboxFormRegion confirmed validation result =
let config =
Checkbox.create "confirmArchivedReview" "Confirm archived-account review"
|> Checkbox.withId "components-confirm-archived-review"
|> Checkbox.withDescription "Required before archived accounts can be included."
|> Checkbox.required
|> (if confirmed then Checkbox.withChecked else id)
|> (match validation with Some message -> Checkbox.withValidation message | None -> id)
div {
_id "components-checkbox-form-region"
_class "grid max-w-sm gap-3"
form {
_novalidate true
_dataOn ("submit", "@post('/components/choices/checkbox')")
_class "grid gap-3"
config |> Checkbox.render
choiceSubmitButton "components-checkbox-submit" "Validate confirmation"
}
choiceResult "components-checkbox-result" result
}Checked
Archived accounts remain read-only.
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let includeArchived =
Checkbox.create "includeArchived" "Include archived accounts"
|> Checkbox.withDescription "Archived accounts remain read-only."
|> Checkbox.withChecked
|> Checkbox.renderPending
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let pendingArchivedReview =
Checkbox.create "confirmArchivedReview" "Saving archived-account review"
|> Checkbox.withId "components-pending-archived-review"
|> Checkbox.withChecked
|> Checkbox.pending
|> Checkbox.renderDisabled
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let disabledArchivedReview =
Checkbox.create "confirmArchivedReview" "Archived review unavailable"
|> Checkbox.withId "components-disabled-archived-review"
|> Checkbox.disabled
|> Checkbox.render