On this pageFunctions
Ui/Switch
/** Creates an initial switch model from a config. Defaults to unchecked. */
(config: InitConfig): {
id: string
isChecked: boolean
}/**
* Programmatically sets the checked state. Emits a `ToggledChecked`
* OutMessage just like a user-initiated toggle. Use this in domain-event
* handlers where you need to force a specific state.
*/
(
model: {
id: string
isChecked: boolean
},
isChecked: boolean
): readonly [
{
id: string
isChecked: boolean
},
readonly Array<Readonly<{
args: Record<string, unknown>
effect: Effect<{
_tag: "Toggled"
} | {
_tag: "SetChecked"
isChecked: boolean
}, never, never>
name: string
}>>,
Option<{
_tag: "ToggledChecked"
isChecked: boolean
}>
]/**
* Processes a switch message and returns the next model, commands, and
* a `ToggledChecked` OutMessage carrying the new checked state.
*/
(
model: {
id: string
isChecked: boolean
},
message: {
_tag: "Toggled"
} | {
_tag: "SetChecked"
isChecked: boolean
}
): readonly [
{
id: string
isChecked: boolean
},
readonly Array<Readonly<{
args: Record<string, unknown>
effect: Effect<{
_tag: "Toggled"
} | {
_tag: "SetChecked"
isChecked: boolean
}, never, never>
name: string
}>>,
Option<{
_tag: "ToggledChecked"
isChecked: boolean
}>
]/** Configuration for creating a switch model with `init`. */
type InitConfig = Readonly<{
id: string
isChecked: boolean
}>/**
* Attribute groups the switch component provides to the consumer's
* `toView` callback. Each group is a `ReadonlyArray<ChildAttribute>`
* whose event handlers dispatch through the Switch's boundary at
* event-fire time. See Checkbox.CheckboxAttributes for the full
* routing model.
*/
type SwitchAttributes = Readonly<{
button: ReadonlyArray<ChildAttribute>
description: ReadonlyArray<ChildAttribute>
hiddenInput: ReadonlyArray<ChildAttribute>
label: ReadonlyArray<ChildAttribute>
}>/** Sent when the user toggles the switch via click or Space key. */
type Toggled = CallableTaggedStruct<"Toggled", {}>/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
type ViewInputs = Readonly<{
isDisabled: boolean
name: string
toView: (attributes: SwitchAttributes) => Html
value: string
}>/** Schema for all messages the switch component can produce. */
const Message: Union<readonly [
CallableTaggedStruct<"Toggled", {}>,
CallableTaggedStruct<"SetChecked", {
isChecked: Boolean
}>
]>/** Schema for the switch component's state, tracking the toggle's checked status. */
const Model: Struct<{
id: String
isChecked: Boolean
}>/**
* Union of out-messages the switch component can produce. Surfaced as
* the third element of `update`'s return tuple and pattern-matched by
* the parent.
*/
const OutMessage: Union<readonly [
CallableTaggedStruct<"ToggledChecked", {
isChecked: Boolean
}>
]>/**
* Sent to set the checked state to a specific value. Use this for
* programmatic state assignment (e.g. a "select all" handler that forces
* all child switches to the same state) where `Toggled`'s flip semantics
* would not reliably reach the desired state.
*/
const SetChecked: CallableTaggedStruct<"SetChecked", {
isChecked: Boolean
}>/**
* Sent to the parent each time the switch toggles. Carries the new
* checked state. Consumers pattern-match this in their `GotSwitchMessage`
* handler to lift the toggle into a domain Message (e.g., persisting the
* setting, dispatching a sync command).
*/
const ToggledChecked: CallableTaggedStruct<"ToggledChecked", {
isChecked: Boolean
}>/**
* Reflects an externally-sourced checked state onto the model without
* emitting an OutMessage. Use this to mirror external truth (saved
* settings, a server value) onto the switch without triggering the
* downstream reaction a user toggle would cause. Contrast with
* `setChecked`, which emits `ToggledChecked` so the parent reacts to a
* programmatic assignment the same way it reacts to a user toggle. Returns
* the model directly because it produces no commands and no OutMessage.
*/
const reflectChecked: Reflect<Model, boolean>/**
* Renders an accessible switch toggle by building ARIA attribute groups
* and delegating layout to the consumer's `toView` callback. Designed
* to be embedded via `h.submodel`.
*/
const view: SubmodelView<{
id: string
isChecked: boolean
}, {
_tag: "Toggled"
} | {
_tag: "SetChecked"
isChecked: boolean
}, Readonly<{
isDisabled: boolean
name: string
toView: (attributes: SwitchAttributes) => Html
value: string
}>>