Choice cards
Single choice
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let richChoiceCards =
ChoiceCards.single "assistance-choice" "assistance" "Booking assistance" id
[ ChoiceCardOption.create "self" "Self-service"
|> ChoiceCardOption.withDescription "The participant completes details and waivers before arrival."
|> ChoiceCardOption.withMetadata "No staff coordination required"
ChoiceCardOption.create "staff" "Staff assisted"
|> ChoiceCardOption.withDescription "A coordinator confirms equipment and participant details."
|> ChoiceCardOption.withMetadata "Recommended for group bookings"
ChoiceCardOption.create "unavailable" "Managed service"
|> ChoiceCardOption.withDescription "Available only to contracted organizations."
|> ChoiceCardOption.disabled ]
|> ChoiceCards.withSelected [ "staff" ]
|> ChoiceCards.required
|> ChoiceCards.renderMultiple choices
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let multipleChoiceCards =
ChoiceCards.multiple "equipment-choice" "equipmentIds" "Equipment" id
[ ChoiceCardOption.create "helmet" "Helmet"
|> ChoiceCardOption.withDescription "Required protective equipment."
|> ChoiceCardOption.withMetadata "Available"
ChoiceCardOption.create "pads" "Protective pads"
|> ChoiceCardOption.withDescription "Knee and elbow protection."
ChoiceCardOption.create "radio" "Trail radio"
|> ChoiceCardOption.withDescription "Unavailable for this booking."
|> ChoiceCardOption.disabled ]
|> ChoiceCards.withSelected [ "helmet"; "pads" ]
|> ChoiceCards.renderValidation
open System
open FSharp.ViewEngine
open Acme.Components.Primitives
open Acme.Components.Application
open type Html
open type Svg
open type Datastar
let invalidChoiceCards =
ChoiceCards.single "invalid-assistance-choice" "invalidAssistance" "Booking assistance" id
[ ChoiceCardOption.create "self" "Self-service"
ChoiceCardOption.create "staff" "Staff assisted" ]
|> ChoiceCards.required
|> ChoiceCards.withValidation "Choose how this booking will be supported."
|> ChoiceCards.render