Radio group
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 basicRadioGroup =
RadioGroup.create "contactMethod" "Contact method" id [
RadioGroup.option "email" "Email"
RadioGroup.option "phone" "Phone" ]
|> RadioGroup.withSelected "email"
|> RadioGroup.renderWith help text
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let radioGroupWithHelp =
RadioGroup.create "delivery" "Delivery" id [
RadioGroup.option "standard" "Standard"
RadioGroup.option "express" "Express" ]
|> RadioGroup.withDescription "Choose how you would like your order delivered."
|> RadioGroup.renderRequired choice 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 private postingModeOptions =
[ RadioGroup.option "automatic" "Automatic"
RadioGroup.option "manual" "Manual review"
RadioGroup.option "scheduled" "Scheduled" |> RadioGroup.disable ]
let radioGroupFormRegion selected validation result =
let config =
RadioGroup.create "postingMode" "Posting mode" id postingModeOptions
|> RadioGroup.withId "components-posting-mode"
|> RadioGroup.withDescription "Choose how approved entries reach the ledger."
|> RadioGroup.required
|> (match selected with Some value -> RadioGroup.withSelected value | None -> id)
|> (match validation with Some message -> RadioGroup.withValidation message | None -> id)
div {
_id "components-radio-form-region"
_class "grid max-w-sm gap-3"
form {
_novalidate true
_dataOn ("submit", "@post('/components/choices/radio')")
_class "grid gap-3"
config |> RadioGroup.render
choiceSubmitButton "components-radio-submit" "Validate posting mode"
}
choiceResult "components-radio-result" result
}
let postingMode = radioGroupFormRegion None None NonePending
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let private postingModeOptions =
[ RadioGroup.option "automatic" "Automatic"
RadioGroup.option "manual" "Manual review"
RadioGroup.option "scheduled" "Scheduled" |> RadioGroup.disable ]
let pendingPostingMode =
RadioGroup.create "postingMode" "Saving posting mode" id postingModeOptions
|> RadioGroup.withId "components-pending-posting-mode"
|> RadioGroup.withSelected "automatic"
|> RadioGroup.pending
|> RadioGroup.renderDisabled
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let private postingModeOptions =
[ RadioGroup.option "automatic" "Automatic"
RadioGroup.option "manual" "Manual review"
RadioGroup.option "scheduled" "Scheduled" |> RadioGroup.disable ]
let disabledPostingMode =
RadioGroup.create "postingMode" "Posting mode unavailable" id postingModeOptions
|> RadioGroup.withId "components-disabled-posting-mode"
|> RadioGroup.withSelected "manual"
|> RadioGroup.disabled
|> RadioGroup.render