On this pageFunctions
Ui/Checkbox
/** Creates an initial checkbox 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 (e.g. "select all").
*/
(
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 checkbox 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
}>
]/**
* Attribute groups the checkbox component provides to the consumer's
* `toView` callback. Each group is a `ReadonlyArray<ChildAttribute>`:
* attributes published from inside Checkbox's own boundary that the
* consumer can spread directly into its own element attribute arrays:
*
* ```ts
* toView: attributes =>
* h.div(
* [...attributes.checkbox, h.Class('my-class'), h.OnClick(MyOwnMsg())],
* [...],
* )
* ```
*
* Checkbox's own `OnClick(Toggled())` handlers (carried inside
* `attributes.checkbox` etc.) dispatch `Toggled` through Checkbox's
* boundary wrap at event-fire time. The consumer's own
* `OnClick(MyOwnMsg())` lives in the parent's boundary and dispatches
* unwrapped. The two routes are tracked separately by the runtime; the
* consumer never has to think about which boundary an attribute belongs
* to.
*/
type CheckboxAttributes = Readonly<{
checkbox: ReadonlyArray<ChildAttribute>
description: ReadonlyArray<ChildAttribute>
hiddenInput: ReadonlyArray<ChildAttribute>
label: ReadonlyArray<ChildAttribute>
}>/** Configuration for creating a checkbox model with `init`. */
type InitConfig = Readonly<{
id: string
isChecked: boolean
}>/** Sent when the user toggles the checkbox via click or Space key. */
type Toggled = CallableTaggedStruct<"Toggled", {}>/**
* Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field.
* Slot content (`toView`) and behavioral flags live here; the parent
* declares them at the embed site rather than threading them through the
* Submodel as a generic-parameterized callback.
*/
type ViewInputs = Readonly<{
isDisabled: boolean
isIndeterminate: boolean
name: string
toView: (attributes: CheckboxAttributes) => Html
value: string
}>/** Schema for all messages the checkbox component can produce. */
const Message: Union<readonly [
CallableTaggedStruct<"Toggled", {}>,
CallableTaggedStruct<"SetChecked", {
isChecked: Boolean
}>
]>/** Schema for the checkbox component's state, tracking the checked status. */
const Model: Struct<{
id: String
isChecked: Boolean
}>/**
* Union of out-messages the checkbox 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 checkboxes 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 checkbox toggles. Carries the new
* checked state. Consumers pattern-match this in their `GotCheckboxMessage`
* handler to lift the toggle into a domain Message (e.g., persisting the
* flag, dispatching a save 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 checkbox 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 checkbox by building ARIA attribute groups and
* delegating layout to the consumer's `toView` callback. Embedded via
* `h.submodel`.
*/
const view: SubmodelView<{
id: string
isChecked: boolean
}, {
_tag: "Toggled"
} | {
_tag: "SetChecked"
isChecked: boolean
}, Readonly<{
isDisabled: boolean
isIndeterminate: boolean
name: string
toView: (attributes: CheckboxAttributes) => Html
value: string
}>>