Skip to main content

Toggle group

Choose one or more pressed values from an accessible oriented toggle group.

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultToggleGroup =
    ToggleGroup.single "alignment-default" "components-alignment-default" "Text alignment" id [
        ToggleGroupOption.create "left" "Left"
        ToggleGroupOption.create "center" "Center"
        ToggleGroupOption.create "right" "Right" ]
    |> ToggleGroup.render

On this page

Installation

Copy this component and its required dependencies into the consumer-owned Components project.

dotnet fve add toggle-group --config src/Acme.Components/fve.json

The CLI resolves dependencies and preserves consumer-authored files. See Installation for project initialization and Tailwind source detection.

Usage

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let defaultToggleGroup =
    ToggleGroup.single "alignment-default" "components-alignment-default" "Text alignment" id [
        ToggleGroupOption.create "left" "Left"
        ToggleGroupOption.create "center" "Center"
        ToggleGroupOption.create "right" "Right" ]
    |> ToggleGroup.render

Single selection

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let singleToggleGroup =
    ToggleGroup.single "alignment" "components-alignment-group" "Text alignment" id [
        ToggleGroupOption.create "left" "Left"
        ToggleGroupOption.create "center" "Center"
        ToggleGroupOption.create "right" "Right" ]
    |> ToggleGroup.withSelected "left"
    |> ToggleGroup.render

Multiple, spaced and unavailable

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let private plusIcon =
    raw """<svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path d="M10 4.25a.75.75 0 0 1 .75.75v4.25H15a.75.75 0 0 1 0 1.5h-4.25V15a.75.75 0 0 1-1.5 0v-4.25H5a.75.75 0 0 1 0-1.5h4.25V5a.75.75 0 0 1 .75-.75Z"/></svg>"""

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 multipleToggleGroup =
    ToggleGroup.multiple "formatting" "components-formatting-group" "Text formatting" id [
        ToggleGroupOption.create "bold" "Bold" |> ToggleGroupOption.withLeading plusIcon
        ToggleGroupOption.create "italic" "Italic" |> ToggleGroupOption.withLeading refreshIcon
        ToggleGroupOption.create "strike" "Strike" |> ToggleGroupOption.disabled ]
    |> ToggleGroup.withSelectedMany [ "bold" ]
    |> ToggleGroup.withVariant ToggleGroupVariant.Spaced
    |> ToggleGroup.withSize ControlSize.Small
    |> ToggleGroup.render

Vertical orientation

open System
open FSharp.ViewEngine
open Acme.Components
open type Html
open type Svg
open type Datastar

let verticalToggleGroup =
    ToggleGroup.single "view" "components-view-group" "Record view" id [
        ToggleGroupOption.create "summary" "Summary"
        ToggleGroupOption.create "activity" "Activity"
        ToggleGroupOption.create "audit" "Audit log" ]
    |> ToggleGroup.withSelected "summary"
    |> ToggleGroup.withOrientation ToggleGroupOrientation.Vertical
    |> ToggleGroup.render

API reference

type ToggleGroupVariant =
    | Connected
    | Spaced

type ToggleGroupOrientation =
    | Horizontal
    | Vertical

type ToggleGroupOption<'value>

type ToggleGroupConfig<'value, 'mode>

module ToggleGroup =
    val single : name:string -> id:string -> label:string -> encode:('value -> string) -> options:ToggleGroupOption<'value> list -> ToggleGroupConfig<'value, SingleSelection>
    val multiple : name:string -> id:string -> label:string -> encode:('value -> string) -> options:ToggleGroupOption<'value> list -> ToggleGroupConfig<'value, MultipleSelection>
    val withSelected : selected:'value -> config:ToggleGroupConfig<'value, SingleSelection> -> ToggleGroupConfig<'value, SingleSelection>
    val withSelectedMany : selected:'value list -> config:ToggleGroupConfig<'value, MultipleSelection> -> ToggleGroupConfig<'value, MultipleSelection>
    val allowEmpty : config:ToggleGroupConfig<'value, SingleSelection> -> ToggleGroupConfig<'value, SingleSelection>
    val withVariant : variant:ToggleGroupVariant -> config:ToggleGroupConfig<'value, 'mode> -> ToggleGroupConfig<'value, 'mode>
    val withOrientation : orientation:ToggleGroupOrientation -> config:ToggleGroupConfig<'value, 'mode> -> ToggleGroupConfig<'value, 'mode>
    val withSize : size:ControlSize -> config:ToggleGroupConfig<'value, 'mode> -> ToggleGroupConfig<'value, 'mode>
    val disabled : config:ToggleGroupConfig<'value, 'mode> -> ToggleGroupConfig<'value, 'mode>
    val render : config:ToggleGroupConfig<'value, 'mode> -> HtmlElement

module ToggleGroupOption =
    val create : value:'a -> label:string -> ToggleGroupOption<'a>
    val withLeading : leading:HtmlElement -> option:ToggleGroupOption<'value> -> ToggleGroupOption<'value>
    val disabled : option:ToggleGroupOption<'value> -> ToggleGroupOption<'value>