DocsAPI referenceHeadlessswitch

switch headless API

The core connector and vanilla mount are always visible. Use the framework choice to inspect native composition, props, outputs, context and hooks for the selected adapter.

@grassroot/ui-headless-core/switch

Core connector and vanilla API

21 exports
View source packages/ui-headless/core/src/switch/index.ts

activateSwitch

function
DeclarationView source
activateSwitchts
declare function activateSwitch(service: SwitchService, scope: PartScope, options?: SwitchConnectOptions): () => void;
Name
Kind
Type
Requirement
service
parameter
SwitchService
required
scope
parameter
PartScope
required
options
parameter
SwitchConnectOptions
optional
return
return value
() => void
n/a
Name
service
Kind
parameter
Type
SwitchService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
SwitchConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
() => void
Requirement
n/a

connectSwitch

function
DeclarationView source
connectSwitchts
declare function connectSwitch(service: SwitchService, scope: PartScope, options?: SwitchConnectOptions): SwitchApi;
Name
Kind
Type
Requirement
service
parameter
SwitchService
required
scope
parameter
PartScope
required
options
parameter
SwitchConnectOptions
optional
return
return value
SwitchApi
n/a
Name
service
Kind
parameter
Type
SwitchService
Requirement
required
Name
scope
Kind
parameter
Type
PartScope
Requirement
required
Name
options
Kind
parameter
Type
SwitchConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
SwitchApi
Requirement
n/a

mountSwitch

function
DeclarationView source
mountSwitchts
declare function mountSwitch(container: HTMLElement, options?: MountSwitchOptions): SwitchMount;
Name
Kind
Type
Requirement
container
parameter
HTMLElement
required
options
parameter
MountSwitchOptions
optional
return
return value
SwitchMount
n/a
Name
container
Kind
parameter
Type
HTMLElement
Requirement
required
Name
options
Kind
parameter
Type
MountSwitchOptions
Requirement
optional
Name
return
Kind
return value
Type
SwitchMount
Requirement
n/a

MountSwitchOptions

interface
DeclarationView source
MountSwitchOptionsts
interface MountSwitchOptions extends SwitchInput {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
/** Framework-native passthrough [switch.spec.md #6]. */
readonly onChange?: (event: unknown) => void;
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
/** Accessible-name escape hatch [baseline #17]. */
readonly ariaLabel?: string;
/** Omits the Label/Description parts entirely (the contract's "bare" scenario) — pair with `ariaLabel`. */
readonly bare?: boolean;
/** Render callback for the label's content; default = "Switch" as textContent. Ignored when `bare`. */
readonly renderLabel?: (label: HTMLElement) => void;
/** Render callback for the description's content; default = untouched (empty). Ignored when `bare`. */
readonly renderDescription?: (description: HTMLElement) => void;
}
Name
Kind
Type
Requirement
Description
ariaLabel
property
string
optional
Accessible-name escape hatch [baseline #17].
bare
property
boolean
optional
Omits the Label/Description parts entirely (the contract's "bare" scenario) — pair with `ariaLabel`.
name
property
string
optional
onChange
property
(event: unknown) => void
optional
Framework-native passthrough [switch.spec.md #6].
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
renderDescription
property
(description: HTMLElement) => void
optional
Render callback for the description's content; default = untouched (empty). Ignored when `bare`.
renderLabel
property
(label: HTMLElement) => void
optional
Render callback for the label's content; default = "Switch" as textContent. Ignored when `bare`.
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Description
Accessible-name escape hatch [baseline #17].
Name
bare
Kind
property
Type
boolean
Requirement
optional
Description
Omits the Label/Description parts entirely (the contract's "bare" scenario) — pair with `ariaLabel`.
Name
name
Kind
property
Type
string
Requirement
optional
Description
Name
onChange
Kind
property
Type
(event: unknown) => void
Requirement
optional
Description
Framework-native passthrough [switch.spec.md #6].
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Description
Name
renderDescription
Kind
property
Type
(description: HTMLElement) => void
Requirement
optional
Description
Render callback for the description's content; default = untouched (empty). Ignored when `bare`.
Name
renderLabel
Kind
property
Type
(label: HTMLElement) => void
Requirement
optional
Description
Render callback for the label's content; default = "Switch" as textContent. Ignored when `bare`.
Name
required
Kind
property
Type
boolean
Requirement
optional
Description
Name
value
Kind
property
Type
string
Requirement
optional
Description

runSwitchCommand

function

Switch-shaped command runner — mirrors `runDialogCommand`/ `runTooltipCommand`. Pass this as the `runCommand` option when constructing the Switch `Service` (never called by `connectSwitch` itself). Maps `CHECKED_CHANGE_REQUEST` to exactly one `onCheckedChange({ checked, reason })` [baseline #6, #7] — no adapter compares snapshots to infer the callback.

DeclarationView source
runSwitchCommandts
declare function runSwitchCommand(command: SwitchCommand, options?: SwitchConnectOptions): void;
Name
Kind
Type
Requirement
command
parameter
SwitchCommand
required
options
parameter
SwitchConnectOptions
optional
return
return value
void
n/a
Name
command
Kind
parameter
Type
SwitchCommand
Requirement
required
Name
options
Kind
parameter
Type
SwitchConnectOptions
Requirement
optional
Name
return
Kind
return value
Type
void
Requirement
n/a
DeclarationView source
switchAnatomyts
export declare const switchAnatomy: readonly ["root", "hidden-input", "control", "thumb", "label", "description"];

SwitchApi

interface
DeclarationView source
SwitchApits
interface SwitchApi {
rootProps(): PartProps;
hiddenInputProps(): PartProps;
controlProps(): PartProps;
thumbProps(): PartProps;
labelProps(): PartProps;
descriptionProps(): PartProps;
/** Restores the registered hidden input from the committed snapshot; a no-op without DOM. */
syncNativeChecked(): void;
readonly checked: boolean;
readonly disabled: boolean;
readonly readOnly: boolean;
}
Name
Kind
Type
Requirement
Description
checked
property
boolean
required
controlProps
method
() => PartProps
required
descriptionProps
method
() => PartProps
required
disabled
property
boolean
required
hiddenInputProps
method
() => PartProps
required
labelProps
method
() => PartProps
required
readOnly
property
boolean
required
rootProps
method
() => PartProps
required
syncNativeChecked
method
() => void
required
Restores the registered hidden input from the committed snapshot; a no-op without DOM.
thumbProps
method
() => PartProps
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Description
Name
controlProps
Kind
method
Type
() => PartProps
Requirement
required
Description
Name
descriptionProps
Kind
method
Type
() => PartProps
Requirement
required
Description
Name
disabled
Kind
property
Type
boolean
Requirement
required
Description
Name
hiddenInputProps
Kind
method
Type
() => PartProps
Requirement
required
Description
Name
labelProps
Kind
method
Type
() => PartProps
Requirement
required
Description
Name
readOnly
Kind
property
Type
boolean
Requirement
required
Description
Name
rootProps
Kind
method
Type
() => PartProps
Requirement
required
Description
Name
syncNativeChecked
Kind
method
Type
() => void
Requirement
required
Description
Restores the registered hidden input from the committed snapshot; a no-op without DOM.
Name
thumbProps
Kind
method
Type
() => PartProps
Requirement
required
Description

SwitchChangeDetail

interface
DeclarationView source
SwitchChangeDetailts
interface SwitchChangeDetail {
readonly checked: boolean;
readonly reason: SwitchChangeReason;
}
Name
Kind
Type
Requirement
checked
property
boolean
required
reason
property
SwitchChangeReason
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
SwitchChangeReason
Requirement
required
DeclarationView source
SwitchChangeReasonts
type SwitchChangeReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
SwitchCommandts
type SwitchCommand = CommandObject & {
readonly type: "CHECKED_CHANGE_REQUEST";
readonly checked: boolean;
readonly reason: SwitchChangeReason;
};
Name
Kind
Type
Requirement
checked
property
boolean
required
reason
property
SwitchChangeReason
required
type
property
string
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
SwitchChangeReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
DeclarationView source
SwitchConnectOptionsts
interface SwitchConnectOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
/** Framework-native passthrough [switch.spec.md #6] — never used to infer `onCheckedChange`. */
readonly onChange?: (event: unknown) => void;
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
/** Accessible-name escape hatch [baseline #17]. */
readonly ariaLabel?: string;
}
Name
Kind
Type
Requirement
Description
ariaLabel
property
string
optional
Accessible-name escape hatch [baseline #17].
name
property
string
optional
onChange
property
(event: unknown) => void
optional
Framework-native passthrough [switch.spec.md #6] — never used to infer `onCheckedChange`.
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Description
Accessible-name escape hatch [baseline #17].
Name
name
Kind
property
Type
string
Requirement
optional
Description
Name
onChange
Kind
property
Type
(event: unknown) => void
Requirement
optional
Description
Framework-native passthrough [switch.spec.md #6] — never used to infer `onCheckedChange`.
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Description
Name
required
Kind
property
Type
boolean
Requirement
optional
Description
Name
value
Kind
property
Type
string
Requirement
optional
Description
DeclarationView source
SwitchContextts
type SwitchContext = {
readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
mode
property
"controlled" | "uncontrolled"
required
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required
DeclarationView source
SwitchEventts
type SwitchEvent = {
readonly type: "PRESS";
readonly reason: SwitchChangeReason;
} | {
readonly type: "RESET";
};
DeclarationView source
SwitchInputts
type SwitchInput = {
readonly checked?: boolean;
readonly defaultChecked?: boolean;
readonly disabled?: boolean;
readonly readOnly?: boolean;
};
Name
Kind
Type
Requirement
checked
property
boolean
optional
defaultChecked
property
boolean
optional
disabled
property
boolean
optional
readOnly
property
boolean
optional
Name
checked
Kind
property
Type
boolean
Requirement
optional
Name
defaultChecked
Kind
property
Type
boolean
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
readOnly
Kind
property
Type
boolean
Requirement
optional
DeclarationView source
switchMachinets
export declare const switchMachine: Machine<SwitchInput, SwitchValue, SwitchContext, SwitchEvent, SwitchCommand>;

SwitchMount

interface
DeclarationView source
SwitchMountts
interface SwitchMount {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly root: HTMLElement;
readonly input: HTMLInputElement;
readonly control: HTMLElement;
readonly thumb: HTMLElement;
readonly label: HTMLElement | null;
readonly description: HTMLElement | null;
destroy(): void;
}
Name
Kind
Type
Requirement
connector
property
SwitchApi
required
control
property
HTMLElement
required
description
property
HTMLElement | null
required
destroy
method
() => void
required
input
property
HTMLInputElement
required
label
property
HTMLElement | null
required
root
property
HTMLElement
required
service
property
SwitchService
required
thumb
property
HTMLElement
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Name
control
Kind
property
Type
HTMLElement
Requirement
required
Name
description
Kind
property
Type
HTMLElement | null
Requirement
required
Name
destroy
Kind
method
Type
() => void
Requirement
required
Name
input
Kind
property
Type
HTMLInputElement
Requirement
required
Name
label
Kind
property
Type
HTMLElement | null
Requirement
required
Name
root
Kind
property
Type
HTMLElement
Requirement
required
Name
service
Kind
property
Type
SwitchService
Requirement
required
Name
thumb
Kind
property
Type
HTMLElement
Requirement
required

SwitchPart

type
DeclarationView source
SwitchPartts
type SwitchPart = (typeof switchAnatomy)[number];
DeclarationView source
switchSelectorsts
export declare const switchSelectors: {
checked: (snapshot: SwitchSnapshot) => boolean;
};
Name
Kind
Type
Requirement
checked
property
(snapshot: SwitchSnapshot) => boolean
required
Name
checked
Kind
property
Type
(snapshot: SwitchSnapshot) => boolean
Requirement
required
DeclarationView source
SwitchServicets
type SwitchService = Service<SwitchInput, SwitchValue, SwitchContext, SwitchEvent, SwitchCommand>;
DeclarationView source
SwitchSnapshotts
type SwitchSnapshot = Snapshot<SwitchValue, SwitchContext>;
DeclarationView source
SwitchValuets
type SwitchValue = "unchecked" | "checked";

Framework adapters

Each panel keeps its adapter's public vocabulary. React compound exports, Vue composables, standalone Angular declarations, Svelte components, and Solid hooks stay native to their framework.

React example follows below.

React imports

@grassroot/ui-headless-react/switchts
import { Control, Description, Label, Root, RootProvider, Switch, Thumb } from "@grassroot/ui-headless-react/switch";

Vue imports

@grassroot/ui-headless-vue/switchts
<script setup lang="ts">
import { SwitchControl, SwitchDescription, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb } from "@grassroot/ui-headless-vue/switch";
</script>

Angular imports

@grassroot/ui-headless-angular/switchts
import { Component } from "@angular/core";
import { GR_SWITCH_DECLARATIONS } from "@grassroot/ui-headless-angular/switch";
@Component({ standalone: true, imports: [GR_SWITCH_DECLARATIONS], template: `<!-- compose the switch parts here -->` })
export class Example {}

Svelte imports

@grassroot/ui-headless-svelte/switchts
<script lang="ts">
import { SwitchControl, SwitchDescription, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb } from "@grassroot/ui-headless-svelte/switch";
</script>

Solid imports

@grassroot/ui-headless-solid/switchts
import { SwitchControl, SwitchDescription, SwitchLabel, SwitchRoot, SwitchRootProvider, SwitchThumb } from "@grassroot/ui-headless-solid/switch";

@grassroot/ui-headless-react/switch

React adapter

17 exports
View source packages/ui-headless/react/src/switch/index.ts

Control

value
DeclarationView source
Controlts
export declare const Control: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

Description

value
DeclarationView source
Descriptionts
export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

HiddenInput

value
DeclarationView source
HiddenInputts
export declare const HiddenInput: import("react").ForwardRefExoticComponent<SwitchHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

Label

value
DeclarationView source
Labelts
export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

Root

value
DeclarationView source
Rootts
export declare const Root: import("react").ForwardRefExoticComponent<SwitchRootProps & import("react").RefAttributes<HTMLLabelElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

RootProvider

value
DeclarationView source
RootProviderts
export declare const RootProvider: import("react").ForwardRefExoticComponent<SwitchRootProviderProps & import("react").RefAttributes<HTMLLabelElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

Switch

value
DeclarationView source
Switchts
export declare const Switch: {
Root: import("react").ForwardRefExoticComponent<SwitchRootProps & import("react").RefAttributes<HTMLLabelElement>>;
RootProvider: import("react").ForwardRefExoticComponent<SwitchRootProviderProps & import("react").RefAttributes<HTMLLabelElement>>;
HiddenInput: import("react").ForwardRefExoticComponent<SwitchHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
Control: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Thumb: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
};
Name
Kind
Type
Requirement
Control
property
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
required
Description
property
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
required
HiddenInput
property
import("react").ForwardRefExoticComponent<SwitchHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>
required
Label
property
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
required
Root
property
import("react").ForwardRefExoticComponent<SwitchRootProps & import("react").RefAttributes<HTMLLabelElement>>
required
RootProvider
property
import("react").ForwardRefExoticComponent<SwitchRootProviderProps & import("react").RefAttributes<HTMLLabelElement>>
required
Thumb
property
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
required
Name
Control
Kind
property
Type
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
Requirement
required
Name
Description
Kind
property
Type
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
Requirement
required
Name
HiddenInput
Kind
property
Type
import("react").ForwardRefExoticComponent<SwitchHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>
Requirement
required
Name
Label
Kind
property
Type
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
Requirement
required
Name
Root
Kind
property
Type
import("react").ForwardRefExoticComponent<SwitchRootProps & import("react").RefAttributes<HTMLLabelElement>>
Requirement
required
Name
RootProvider
Kind
property
Type
import("react").ForwardRefExoticComponent<SwitchRootProviderProps & import("react").RefAttributes<HTMLLabelElement>>
Requirement
required
Name
Thumb
Kind
property
Type
import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { asChild?: boolean; } & import("react").RefAttributes<HTMLSpanElement>>
Requirement
required
DeclarationView source
SwitchContextts
export declare const SwitchContext: import("react").Context<SwitchContextValue | null>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

SwitchContextValue

interface
DeclarationView source
SwitchContextValuets
interface SwitchContextValue {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
}
Name
Kind
Type
Requirement
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
SwitchService
Requirement
required
DeclarationView source
SwitchHiddenInputPropsts
interface SwitchHiddenInputProps extends Omit<ComponentPropsWithoutRef<"input">, "checked" | "defaultChecked" | "disabled"> {
readonly asChild?: boolean;
}
Name
Kind
Type
Requirement
asChild
property
boolean
optional
Name
asChild
Kind
property
Type
boolean
Requirement
optional

SwitchRootProps

interface
DeclarationView source
SwitchRootPropsts
interface SwitchRootProps extends Omit<ComponentPropsWithoutRef<"label">, "defaultChecked" | "checked" | "disabled" | "onChange"> {
readonly asChild?: boolean;
readonly checked?: SwitchInput["checked"];
readonly defaultChecked?: SwitchInput["defaultChecked"];
readonly disabled?: SwitchInput["disabled"];
readonly readOnly?: SwitchInput["readOnly"];
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
/** Accessible-name escape hatch [baseline #17] — see `Switch.Label` for the primary path. */
readonly ariaLabel?: string;
/**
* Seeds the part scope INSTEAD of the generated id when supplied
* [baseline #10]: `<Switch.Root id="wifi">` yields deterministic
* `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds
* `useSwitch`'s `id` option — see that hook's doc comment. Intercepted
* here rather than left in the native passthrough, so it configures the
* scope seed instead of landing on the rendered `<label>` as a plain
* HTML `id` attribute.
*/
readonly id?: string;
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
Description
ariaLabel
property
string
optional
Accessible-name escape hatch [baseline #17] — see `Switch.Label` for the primary path.
asChild
property
boolean
optional
checked
property
SwitchInput["checked"]
optional
children
property
ReactNode
optional
defaultChecked
property
SwitchInput["defaultChecked"]
optional
disabled
property
SwitchInput["disabled"]
optional
id
property
string
optional
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<Switch.Root id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `useSwitch`'s `id` option — see that hook's doc comment. Intercepted here rather than left in the native passthrough, so it configures the scope seed instead of landing on the rendered `<label>` as a plain HTML `id` attribute.
name
property
string
optional
onChange
property
(event: ChangeEvent<HTMLInputElement>) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
readOnly
property
SwitchInput["readOnly"]
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Description
Accessible-name escape hatch [baseline #17] — see `Switch.Label` for the primary path.
Name
asChild
Kind
property
Type
boolean
Requirement
optional
Description
Name
checked
Kind
property
Type
SwitchInput["checked"]
Requirement
optional
Description
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Description
Name
defaultChecked
Kind
property
Type
SwitchInput["defaultChecked"]
Requirement
optional
Description
Name
disabled
Kind
property
Type
SwitchInput["disabled"]
Requirement
optional
Description
Name
id
Kind
property
Type
string
Requirement
optional
Description
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<Switch.Root id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `useSwitch`'s `id` option — see that hook's doc comment. Intercepted here rather than left in the native passthrough, so it configures the scope seed instead of landing on the rendered `<label>` as a plain HTML `id` attribute.
Name
name
Kind
property
Type
string
Requirement
optional
Description
Name
onChange
Kind
property
Type
(event: ChangeEvent<HTMLInputElement>) => void
Requirement
optional
Description
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Description
Name
readOnly
Kind
property
Type
SwitchInput["readOnly"]
Requirement
optional
Description
Name
required
Kind
property
Type
boolean
Requirement
optional
Description
Name
value
Kind
property
Type
string
Requirement
optional
Description
DeclarationView source
SwitchRootProviderPropsts
interface SwitchRootProviderProps extends Omit<ComponentPropsWithoutRef<"label">, "defaultChecked" | "checked" | "disabled" | "onChange" | "value"> {
readonly asChild?: boolean;
/** An existing `useSwitch()` result (advanced composition) — already fully configured. */
readonly value: UseSwitchResult;
readonly children?: ReactNode;
}
Name
Kind
Type
Requirement
Description
asChild
property
boolean
optional
children
property
ReactNode
optional
value
property
UseSwitchResult
required
An existing `useSwitch()` result (advanced composition) — already fully configured.
Name
asChild
Kind
property
Type
boolean
Requirement
optional
Description
Name
children
Kind
property
Type
ReactNode
Requirement
optional
Description
Name
value
Kind
property
Type
UseSwitchResult
Requirement
required
Description
An existing `useSwitch()` result (advanced composition) — already fully configured.

Thumb

value
DeclarationView source
Thumbts
export declare const Thumb: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
asChild?: boolean;
} & import("react").RefAttributes<HTMLSpanElement>>;
Name
Kind
Type
Requirement
props
parameter
P
required
return
return value
ReactNode
n/a
Name
props
Kind
parameter
Type
P
Requirement
required
Name
return
Kind
return value
Type
ReactNode
Requirement
n/a

useSwitch

function
DeclarationView source
useSwitchts
declare function useSwitch(input: SwitchInput, options?: UseSwitchOptions): UseSwitchResult;
Name
Kind
Type
Requirement
input
parameter
SwitchInput
required
options
parameter
UseSwitchOptions
optional
return
return value
UseSwitchResult
n/a
Name
input
Kind
parameter
Type
SwitchInput
Requirement
required
Name
options
Kind
parameter
Type
UseSwitchOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSwitchResult
Requirement
n/a

useSwitchContext

function
DeclarationView source
useSwitchContextts
declare function useSwitchContext(partName: string): SwitchContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
SwitchContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
SwitchContextValue
Requirement
n/a

UseSwitchOptions

interface
DeclarationView source
UseSwitchOptionsts
interface UseSwitchOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
readonly ariaLabel?: string;
readonly id?: string;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
name
property
string
optional
onChange
property
(event: ChangeEvent<HTMLInputElement>) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
onChange
Kind
property
Type
(event: ChangeEvent<HTMLInputElement>) => void
Requirement
optional
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional

UseSwitchResult

interface
DeclarationView source
UseSwitchResultts
interface UseSwitchResult {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
readonly snapshot: SwitchSnapshot;
}
Name
Kind
Type
Requirement
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
snapshot
property
SwitchSnapshot
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
SwitchService
Requirement
required
Name
snapshot
Kind
property
Type
SwitchSnapshot
Requirement
required

@grassroot/ui-headless-vue/switch

Vue adapter

13 exports
View source packages/ui-headless/vue/src/switch/index.ts
DeclarationView source
SwitchContextKeyts
export declare const SwitchContextKey: InjectionKey<SwitchContextValue>;

SwitchContextValue

interface
DeclarationView source
SwitchContextValuets
interface SwitchContextValue {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
/** Bumped on every committed machine update; parts read `.value` to establish a reactive dependency. */
readonly snapshot: ShallowRef<SwitchSnapshot>;
}
Name
Kind
Type
Requirement
Description
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
snapshot
property
ShallowRef<SwitchSnapshot>
required
Bumped on every committed machine update; parts read `.value` to establish a reactive dependency.
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Description
Name
scope
Kind
property
Type
PartScope
Requirement
required
Description
Name
service
Kind
property
Type
SwitchService
Requirement
required
Description
Name
snapshot
Kind
property
Type
ShallowRef<SwitchSnapshot>
Requirement
required
Description
Bumped on every committed machine update; parts read `.value` to establish a reactive dependency.
DeclarationView source
SwitchControlts
export declare const SwitchControl: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
SwitchDescriptionts
export declare const SwitchDescription: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
SwitchHiddenInputts
export declare const SwitchHiddenInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SwitchLabel

value
DeclarationView source
SwitchLabelts
export declare const SwitchLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SwitchRoot

value
DeclarationView source
SwitchRootts
export declare const SwitchRoot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
checked: {
type: PropType<SwitchInput["checked"]>;
default: undefined;
};
defaultChecked: {
type: PropType<SwitchInput["defaultChecked"]>;
default: undefined;
};
disabled: {
type: PropType<SwitchInput["disabled"]>;
default: undefined;
};
readOnly: {
type: PropType<SwitchInput["readOnly"]>;
default: undefined;
};
name: {
type: PropType<string | undefined>;
default: undefined;
};
value: {
type: PropType<string | undefined>;
default: undefined;
};
required: {
type: PropType<boolean | undefined>;
default: undefined;
};
/** Accessible-name escape hatch [baseline #17] — see `SwitchLabel` for the primary path. */
ariaLabel: {
type: PropType<string | undefined>;
default: undefined;
};
/**
* Seeds the part scope INSTEAD of the generated id when supplied
* [baseline #10]: `<SwitchRoot id="wifi">` yields deterministic
* `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds
* `useSwitch`'s `id` option — see that composable's doc comment. Declared
* as a real prop (not left to fall through to `attrs`) so it configures
* the scope seed instead of landing on the rendered `<label>` as a plain
* HTML `id` attribute.
*/
id: {
type: PropType<string | undefined>;
default: undefined;
};
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
checkedChange: (_detail: SwitchChangeDetail) => true;
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
checked: {
type: PropType<SwitchInput["checked"]>;
default: undefined;
};
defaultChecked: {
type: PropType<SwitchInput["defaultChecked"]>;
default: undefined;
};
disabled: {
type: PropType<SwitchInput["disabled"]>;
default: undefined;
};
readOnly: {
type: PropType<SwitchInput["readOnly"]>;
default: undefined;
};
name: {
type: PropType<string | undefined>;
default: undefined;
};
value: {
type: PropType<string | undefined>;
default: undefined;
};
required: {
type: PropType<boolean | undefined>;
default: undefined;
};
/** Accessible-name escape hatch [baseline #17] — see `SwitchLabel` for the primary path. */
ariaLabel: {
type: PropType<string | undefined>;
default: undefined;
};
/**
* Seeds the part scope INSTEAD of the generated id when supplied
* [baseline #10]: `<SwitchRoot id="wifi">` yields deterministic
* `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds
* `useSwitch`'s `id` option — see that composable's doc comment. Declared
* as a real prop (not left to fall through to `attrs`) so it configures
* the scope seed instead of landing on the rendered `<label>` as a plain
* HTML `id` attribute.
*/
id: {
type: PropType<string | undefined>;
default: undefined;
};
}>> & Readonly<{
onCheckedChange?: ((_detail: SwitchChangeDetail) => any) | undefined;
}>, {
asChild: boolean;
checked: boolean | undefined;
defaultChecked: boolean | undefined;
disabled: boolean | undefined;
readOnly: boolean | undefined;
name: string | undefined;
value: string | undefined;
required: boolean | undefined;
ariaLabel: string | undefined;
id: string | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
DeclarationView source
SwitchRootProviderts
export declare const SwitchRootProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
/** An existing `useSwitch()` result (advanced composition) — already fully configured. */
value: {
type: PropType<UseSwitchResult>;
required: true;
};
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
/** An existing `useSwitch()` result (advanced composition) — already fully configured. */
value: {
type: PropType<UseSwitchResult>;
required: true;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

SwitchThumb

value
DeclarationView source
SwitchThumbts
export declare const SwitchThumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
asChild: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
asChild: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

useSwitch

function
DeclarationView source
useSwitchts
declare function useSwitch(input: SwitchInput | (() => SwitchInput), options?: UseSwitchOptions | (() => UseSwitchOptions)): UseSwitchResult;
Name
Kind
Type
Requirement
input
parameter
SwitchInput | (() => SwitchInput)
required
options
parameter
UseSwitchOptions | (() => UseSwitchOptions)
optional
return
return value
UseSwitchResult
n/a
Name
input
Kind
parameter
Type
SwitchInput | (() => SwitchInput)
Requirement
required
Name
options
Kind
parameter
Type
UseSwitchOptions | (() => UseSwitchOptions)
Requirement
optional
Name
return
Kind
return value
Type
UseSwitchResult
Requirement
n/a

useSwitchContext

function
DeclarationView source
useSwitchContextts
declare function useSwitchContext(partName: string): SwitchContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
SwitchContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
SwitchContextValue
Requirement
n/a

UseSwitchOptions

interface
DeclarationView source
UseSwitchOptionsts
interface UseSwitchOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: Event) => void;
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
readonly ariaLabel?: string;
readonly id?: string;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
name
property
string
optional
onChange
property
(event: Event) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
onChange
Kind
property
Type
(event: Event) => void
Requirement
optional
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional

UseSwitchResult

interface
DeclarationView source
UseSwitchResultts
interface UseSwitchResult {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
readonly snapshot: ShallowRef<SwitchSnapshot>;
}
Name
Kind
Type
Requirement
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
snapshot
property
ShallowRef<SwitchSnapshot>
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
SwitchService
Requirement
required
Name
snapshot
Kind
property
Type
ShallowRef<SwitchSnapshot>
Requirement
required

@grassroot/ui-headless-angular/switch

Angular adapter

15 exports
View source packages/ui-headless/angular/src/switch/index.ts
DeclarationView source
createSwitchStorets
export declare function createSwitchStore(initialInput: SwitchInput, options?: CreateSwitchStoreOptions): SwitchStore;
Name
Kind
Type
Requirement
initialInput
parameter
SwitchInput
required
options
parameter
CreateSwitchStoreOptions
optional
return
return value
SwitchStore
n/a
Name
initialInput
Kind
parameter
Type
SwitchInput
Requirement
required
Name
options
Kind
parameter
Type
CreateSwitchStoreOptions
Requirement
optional
Name
return
Kind
return value
Type
SwitchStore
Requirement
n/a
DeclarationView source
CreateSwitchStoreOptionsts
export interface CreateSwitchStoreOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: unknown) => void;
readonly onCommit?: () => void;
readonly id?: string;
}
Name
Kind
Type
Requirement
id
property
string
optional
onChange
property
(event: unknown) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
onCommit
property
() => void
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onChange
Kind
property
Type
(event: unknown) => void
Requirement
optional
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Name
onCommit
Kind
property
Type
() => void
Requirement
optional
DeclarationView source
GR_SWITCH_DECLARATIONSts
export declare const GR_SWITCH_DECLARATIONS: readonly [typeof GrSwitchRoot, typeof GrSwitchRootProvider, typeof GrSwitchHiddenInput, typeof GrSwitchControl, typeof GrSwitchThumb, typeof GrSwitchLabel, typeof GrSwitchDescription];
DeclarationView source
GrSwitchControlts
export declare class GrSwitchControl implements OnDestroy {
private readonly store;
private readonly elementRef;
private readonly listeners;
private readonly consumerProps;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchControl, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrSwitchControl, "[grSwitchControl]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
consumerProps
property
any
required
elementRef
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrSwitchControl, "[grSwitchControl]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchControl, never>
required
store
property
any
required
Name
consumerProps
Kind
property
Type
any
Requirement
required
Name
elementRef
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrSwitchControl, "[grSwitchControl]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchControl, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required
DeclarationView source
GrSwitchDescriptionts
export declare class GrSwitchDescription implements OnDestroy {
private readonly store;
private readonly elementRef;
private readonly listeners;
private readonly consumerProps;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchDescription, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrSwitchDescription, "[grSwitchDescription]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
consumerProps
property
any
required
elementRef
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrSwitchDescription, "[grSwitchDescription]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchDescription, never>
required
store
property
any
required
Name
consumerProps
Kind
property
Type
any
Requirement
required
Name
elementRef
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrSwitchDescription, "[grSwitchDescription]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchDescription, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required
DeclarationView source
GrSwitchHiddenInputts
export declare class GrSwitchHiddenInput implements OnDestroy {
private readonly store;
private readonly elementRef;
private readonly listeners;
private readonly consumerProps;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchHiddenInput, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrSwitchHiddenInput, "input[grSwitchHiddenInput]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
consumerProps
property
any
required
elementRef
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrSwitchHiddenInput, "input[grSwitchHiddenInput]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchHiddenInput, never>
required
store
property
any
required
Name
consumerProps
Kind
property
Type
any
Requirement
required
Name
elementRef
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrSwitchHiddenInput, "input[grSwitchHiddenInput]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchHiddenInput, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required
DeclarationView source
GrSwitchLabelts
export declare class GrSwitchLabel implements OnDestroy {
private readonly store;
private readonly elementRef;
private readonly listeners;
private readonly consumerProps;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchLabel, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrSwitchLabel, "[grSwitchLabel]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
consumerProps
property
any
required
elementRef
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrSwitchLabel, "[grSwitchLabel]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchLabel, never>
required
store
property
any
required
Name
consumerProps
Kind
property
Type
any
Requirement
required
Name
elementRef
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrSwitchLabel, "[grSwitchLabel]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchLabel, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required

GrSwitchRoot

class
DeclarationView source
GrSwitchRootts
export declare class GrSwitchRoot implements OnDestroy {
readonly checked: import("@angular/core").InputSignal<boolean | undefined>;
readonly defaultChecked: import("@angular/core").InputSignal<boolean | undefined>;
readonly disabled: import("@angular/core").InputSignal<boolean | undefined>;
readonly readOnly: import("@angular/core").InputSignal<boolean | undefined>;
readonly name: import("@angular/core").InputSignal<string | undefined>;
readonly value: import("@angular/core").InputSignal<string | undefined>;
readonly required: import("@angular/core").InputSignal<boolean | undefined>;
/** Accessible-name escape hatch [baseline #17] — see `GrSwitchLabel` for the primary path. */
readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
/**
* Seeds the part scope INSTEAD of the generated id when supplied
* [baseline #10]: `<gr-switch-root id="wifi">` yields deterministic
* `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds
* `createSwitchStore`'s `id` option (constructor-only — see that
* function's doc comment); read once, in the constructor below, unlike
* `name`/`value`/`required`/`ariaLabel`, which stay live via
* `setConnectOptions()`.
*/
readonly id: import("@angular/core").InputSignal<string | undefined>;
readonly checkedChange: import("@angular/core").OutputEmitterRef<SwitchChangeDetail>;
private readonly hostElementRef;
private readonly injector;
private readonly listeners;
private lastSynced;
readonly store: SwitchStore;
private rootElement;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchRoot, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GrSwitchRoot, "gr-switch-root", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
}
Name
Kind
Type
Requirement
Description
ariaLabel
property
import("@angular/core").InputSignal<string | undefined>
required
Accessible-name escape hatch [baseline #17] — see `GrSwitchLabel` for the primary path.
checked
property
import("@angular/core").InputSignal<boolean | undefined>
required
checkedChange
property
import("@angular/core").OutputEmitterRef<SwitchChangeDetail>
required
defaultChecked
property
import("@angular/core").InputSignal<boolean | undefined>
required
disabled
property
import("@angular/core").InputSignal<boolean | undefined>
required
hostElementRef
property
any
required
id
property
import("@angular/core").InputSignal<string | undefined>
required
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<gr-switch-root id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `createSwitchStore`'s `id` option (constructor-only — see that function's doc comment); read once, in the constructor below, unlike `name`/`value`/`required`/`ariaLabel`, which stay live via `setConnectOptions()`.
injector
property
any
required
lastSynced
property
any
required
listeners
property
any
required
name
property
import("@angular/core").InputSignal<string | undefined>
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrSwitchRoot, "gr-switch-root", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchRoot, never>
required
Name
ariaLabel
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Description
Accessible-name escape hatch [baseline #17] — see `GrSwitchLabel` for the primary path.
Name
checked
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Description
Name
checkedChange
Kind
property
Type
import("@angular/core").OutputEmitterRef<SwitchChangeDetail>
Requirement
required
Description
Name
defaultChecked
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Description
Name
disabled
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Description
Name
hostElementRef
Kind
property
Type
any
Requirement
required
Description
Name
id
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Description
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<gr-switch-root id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `createSwitchStore`'s `id` option (constructor-only — see that function's doc comment); read once, in the constructor below, unlike `name`/`value`/`required`/`ariaLabel`, which stay live via `setConnectOptions()`.
Name
injector
Kind
property
Type
any
Requirement
required
Description
Name
lastSynced
Kind
property
Type
any
Requirement
required
Description
Name
listeners
Kind
property
Type
any
Requirement
required
Description
Name
name
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Description
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Description
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrSwitchRoot, "gr-switch-root", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "defaultChecked": { "alias": "defaultChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>
Requirement
required
Description
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchRoot, never>
Requirement
required
Description
Name
readOnly
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Description
Name
required
Kind
property
Type
import("@angular/core").InputSignal<boolean | undefined>
Requirement
required
Description
Name
rootElement
Kind
property
Type
any
Requirement
required
Description
Name
store
Kind
property
Type
SwitchStore
Requirement
required
Description
Name
value
Kind
property
Type
import("@angular/core").InputSignal<string | undefined>
Requirement
required
Description
DeclarationView source
GrSwitchRootProviderts
export declare class GrSwitchRootProvider implements OnDestroy {
private readonly hostElementRef;
private readonly injector;
private readonly listeners;
readonly store: SwitchStore;
private rootElement;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchRootProvider, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<GrSwitchRootProvider, "gr-switch-root-provider", never, {}, {}, never, ["*"], true, never>;
}
Name
Kind
Type
Requirement
hostElementRef
property
any
required
injector
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵcmp
property
i0.ɵɵComponentDeclaration<GrSwitchRootProvider, "gr-switch-root-provider", never, {}, {}, never, ["*"], true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchRootProvider, never>
required
rootElement
property
any
required
store
property
SwitchStore
required
Name
hostElementRef
Kind
property
Type
any
Requirement
required
Name
injector
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵcmp
Kind
property
Type
i0.ɵɵComponentDeclaration<GrSwitchRootProvider, "gr-switch-root-provider", never, {}, {}, never, ["*"], true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchRootProvider, never>
Requirement
required
Name
rootElement
Kind
property
Type
any
Requirement
required
Name
store
Kind
property
Type
SwitchStore
Requirement
required
DeclarationView source
GrSwitchThumbts
export declare class GrSwitchThumb implements OnDestroy {
private readonly store;
private readonly elementRef;
private readonly listeners;
private readonly consumerProps;
constructor();
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<GrSwitchThumb, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<GrSwitchThumb, "[grSwitchThumb]", never, {}, {}, never, never, true, never>;
}
Name
Kind
Type
Requirement
consumerProps
property
any
required
elementRef
property
any
required
listeners
property
any
required
ngOnDestroy
method
() => void
required
ɵdir
property
i0.ɵɵDirectiveDeclaration<GrSwitchThumb, "[grSwitchThumb]", never, {}, {}, never, never, true, never>
required
ɵfac
property
i0.ɵɵFactoryDeclaration<GrSwitchThumb, never>
required
store
property
any
required
Name
consumerProps
Kind
property
Type
any
Requirement
required
Name
elementRef
Kind
property
Type
any
Requirement
required
Name
listeners
Kind
property
Type
any
Requirement
required
Name
ngOnDestroy
Kind
method
Type
() => void
Requirement
required
Name
ɵdir
Kind
property
Type
i0.ɵɵDirectiveDeclaration<GrSwitchThumb, "[grSwitchThumb]", never, {}, {}, never, never, true, never>
Requirement
required
Name
ɵfac
Kind
property
Type
i0.ɵɵFactoryDeclaration<GrSwitchThumb, never>
Requirement
required
Name
store
Kind
property
Type
any
Requirement
required
DeclarationView source
provideSwitchStorets
export declare function provideSwitchStore(initialInput?: SwitchInput, options?: CreateSwitchStoreOptions): Provider;
Name
Kind
Type
Requirement
initialInput
parameter
SwitchInput
optional
options
parameter
CreateSwitchStoreOptions
optional
return
return value
Provider
n/a
Name
initialInput
Kind
parameter
Type
SwitchInput
Requirement
optional
Name
options
Kind
parameter
Type
CreateSwitchStoreOptions
Requirement
optional
Name
return
Kind
return value
Type
Provider
Requirement
n/a

SWITCH_STORE

value
DeclarationView source
SWITCH_STOREts
export declare const SWITCH_STORE: InjectionToken<SwitchStore>;

SwitchChangeDetail

interface
DeclarationView source
SwitchChangeDetailts
export interface SwitchChangeDetail {
readonly checked: boolean;
readonly reason: SwitchChangeReason;
}
Name
Kind
Type
Requirement
checked
property
boolean
required
reason
property
SwitchChangeReason
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
SwitchChangeReason
Requirement
required
DeclarationView source
SwitchConnectOptionsPatchts
export interface SwitchConnectOptionsPatch {
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
readonly ariaLabel?: string;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
name
property
string
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional

SwitchStore

interface
DeclarationView source
SwitchStorets
export interface SwitchStore {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
/**
* Bumped on every committed machine update — AND, defensively, once by
* `GrSwitchLabel`/`GrSwitchDescription` right after they self-register
* (see `parts.ts`). Effects that read the connector's prop bags must read
* this signal first — inside the same `effect()` — so Angular's
* reactivity re-runs the effect on every committed change (the staleness
* bug class called out across every other adapter) AND so
* `GrSwitchHiddenInput`'s `aria-labelledby`/`aria-describedby` (resolved
* from `scope.get("label"/"description")` at getter-call time) settle
* once those parts exist, even if some future template change ever
* managed to construct them after the hidden input's own first effect
* flush.
*/
readonly version: WritableSignal<number>;
/** Starts the underlying service and runs `activateSwitch` (idempotent) — call from the browser only. */
start(): void;
/** Stops the underlying service and releases `activateSwitch`'s cleanup (idempotent). */
stop(): void;
/** Forwards a new committed input to the machine (no-op on the very first call). */
sync(input: SwitchInput): void;
/**
* Updates the connector's live `name`/`value`/`required`/`ariaLabel`
* reading (see `use-switch.ts`'s header comment for why this exists
* instead of a one-shot constructor-time value).
*/
setConnectOptions(next: SwitchConnectOptionsPatch): void;
}
Name
Kind
Type
Requirement
Description
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
setConnectOptions
method
(next: SwitchConnectOptionsPatch) => void
required
Updates the connector's live `name`/`value`/`required`/`ariaLabel` reading (see `use-switch.ts`'s header comment for why this exists instead of a one-shot constructor-time value).
start
method
() => void
required
Starts the underlying service and runs `activateSwitch` (idempotent) — call from the browser only.
stop
method
() => void
required
Stops the underlying service and releases `activateSwitch`'s cleanup (idempotent).
sync
method
(input: SwitchInput) => void
required
Forwards a new committed input to the machine (no-op on the very first call).
version
property
WritableSignal<number>
required
Bumped on every committed machine update — AND, defensively, once by `GrSwitchLabel`/`GrSwitchDescription` right after they self-register (see `parts.ts`). Effects that read the connector's prop bags must read this signal first — inside the same `effect()` — so Angular's reactivity re-runs the effect on every committed change (the staleness bug class called out across every other adapter) AND so `GrSwitchHiddenInput`'s `aria-labelledby`/`aria-describedby` (resolved from `scope.get("label"/"description")` at getter-call time) settle once those parts exist, even if some future template change ever managed to construct them after the hidden input's own first effect flush.
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Description
Name
scope
Kind
property
Type
PartScope
Requirement
required
Description
Name
service
Kind
property
Type
SwitchService
Requirement
required
Description
Name
setConnectOptions
Kind
method
Type
(next: SwitchConnectOptionsPatch) => void
Requirement
required
Description
Updates the connector's live `name`/`value`/`required`/`ariaLabel` reading (see `use-switch.ts`'s header comment for why this exists instead of a one-shot constructor-time value).
Name
start
Kind
method
Type
() => void
Requirement
required
Description
Starts the underlying service and runs `activateSwitch` (idempotent) — call from the browser only.
Name
stop
Kind
method
Type
() => void
Requirement
required
Description
Stops the underlying service and releases `activateSwitch`'s cleanup (idempotent).
Name
sync
Kind
method
Type
(input: SwitchInput) => void
Requirement
required
Description
Forwards a new committed input to the machine (no-op on the very first call).
Name
version
Kind
property
Type
WritableSignal<number>
Requirement
required
Description
Bumped on every committed machine update — AND, defensively, once by `GrSwitchLabel`/`GrSwitchDescription` right after they self-register (see `parts.ts`). Effects that read the connector's prop bags must read this signal first — inside the same `effect()` — so Angular's reactivity re-runs the effect on every committed change (the staleness bug class called out across every other adapter) AND so `GrSwitchHiddenInput`'s `aria-labelledby`/`aria-describedby` (resolved from `scope.get("label"/"description")` at getter-call time) settle once those parts exist, even if some future template change ever managed to construct them after the hidden input's own first effect flush.

@grassroot/ui-headless-svelte/switch

Svelte adapter

20 exports
View source packages/ui-headless/svelte/src/switch/index.ts

createSwitch

function
DeclarationView source
createSwitchts
export declare function createSwitch(inputGetter: () => SwitchInput, optionsGetter?: () => UseSwitchOptions): UseSwitchResult;
Name
Kind
Type
Requirement
inputGetter
parameter
() => SwitchInput
required
optionsGetter
parameter
() => UseSwitchOptions
optional
return
return value
UseSwitchResult
n/a
Name
inputGetter
Kind
parameter
Type
() => SwitchInput
Requirement
required
Name
optionsGetter
Kind
parameter
Type
() => UseSwitchOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSwitchResult
Requirement
n/a

SwitchChangeDetail

interface
DeclarationView source
SwitchChangeDetailts
interface SwitchChangeDetail {
readonly checked: boolean;
readonly reason: SwitchChangeReason;
}
Name
Kind
Type
Requirement
checked
property
boolean
required
reason
property
SwitchChangeReason
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
SwitchChangeReason
Requirement
required
DeclarationView source
SwitchChangeReasonts
type SwitchChangeReason = "pointer" | "keyboard" | "programmatic";
DeclarationView source
SwitchCommandts
type SwitchCommand = CommandObject & {
readonly type: "CHECKED_CHANGE_REQUEST";
readonly checked: boolean;
readonly reason: SwitchChangeReason;
};
Name
Kind
Type
Requirement
checked
property
boolean
required
reason
property
SwitchChangeReason
required
type
property
string
required
Name
checked
Kind
property
Type
boolean
Requirement
required
Name
reason
Kind
property
Type
SwitchChangeReason
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required
DeclarationView source
SwitchContextts
type SwitchContext = {
readonly mode: "controlled" | "uncontrolled";
};
Name
Kind
Type
Requirement
mode
property
"controlled" | "uncontrolled"
required
Name
mode
Kind
property
Type
"controlled" | "uncontrolled"
Requirement
required

SwitchContextValue

interface
DeclarationView source
SwitchContextValuets
export interface SwitchContextValue {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
/**
* Bumped on every committed machine update. Parts must read this
* (`ctx.version()`) *inside* the `$derived` that computes their prop
* bag — not once at setup — so Svelte's fine-grained reactivity tracks
* the dependency and recomputes on every committed change (mirrors the
* Dialog/Tooltip adapters' equivalent staleness fix).
*/
readonly version: () => number;
}
Name
Kind
Type
Requirement
Description
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
version
property
() => number
required
Bumped on every committed machine update. Parts must read this (`ctx.version()`) *inside* the `$derived` that computes their prop bag — not once at setup — so Svelte's fine-grained reactivity tracks the dependency and recomputes on every committed change (mirrors the Dialog/Tooltip adapters' equivalent staleness fix).
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Description
Name
scope
Kind
property
Type
PartScope
Requirement
required
Description
Name
service
Kind
property
Type
SwitchService
Requirement
required
Description
Name
version
Kind
property
Type
() => number
Requirement
required
Description
Bumped on every committed machine update. Parts must read this (`ctx.version()`) *inside* the `$derived` that computes their prop bag — not once at setup — so Svelte's fine-grained reactivity tracks the dependency and recomputes on every committed change (mirrors the Dialog/Tooltip adapters' equivalent staleness fix).
DeclarationView source
SwitchControlts
export declare const SwitchControl: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchDescriptionts
export declare const SwitchDescription: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchEventts
type SwitchEvent = {
readonly type: "PRESS";
readonly reason: SwitchChangeReason;
} | {
readonly type: "RESET";
};
DeclarationView source
SwitchHiddenInputts
export declare const SwitchHiddenInput: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchInputts
type SwitchInput = {
readonly checked?: boolean;
readonly defaultChecked?: boolean;
readonly disabled?: boolean;
readonly readOnly?: boolean;
};
Name
Kind
Type
Requirement
checked
property
boolean
optional
defaultChecked
property
boolean
optional
disabled
property
boolean
optional
readOnly
property
boolean
optional
Name
checked
Kind
property
Type
boolean
Requirement
optional
Name
defaultChecked
Kind
property
Type
boolean
Requirement
optional
Name
disabled
Kind
property
Type
boolean
Requirement
optional
Name
readOnly
Kind
property
Type
boolean
Requirement
optional

SwitchLabel

value
DeclarationView source
SwitchLabelts
export declare const SwitchLabel: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a

SwitchRoot

value
DeclarationView source
SwitchRootts
export declare const SwitchRoot: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchRootProviderts
export declare const SwitchRootProvider: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchSnapshotts
type SwitchSnapshot = Snapshot<SwitchValue, SwitchContext>;

SwitchThumb

value
DeclarationView source
SwitchThumbts
export declare const SwitchThumb: LegacyComponentType;
Name
Kind
Type
Requirement
args
parameter
Parameters<Component<Record<string, any>>>
optional
return
return value
ReturnType<Component<Record<string, any>, Record<string, any>>>
n/a
Name
args
Kind
parameter
Type
Parameters<Component<Record<string, any>>>
Requirement
optional
Name
return
Kind
return value
Type
ReturnType<Component<Record<string, any>, Record<string, any>>>
Requirement
n/a
DeclarationView source
SwitchValuets
type SwitchValue = "unchecked" | "checked";

useSwitchContext

function
DeclarationView source
useSwitchContextts
export declare function useSwitchContext(partName: string): SwitchContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
SwitchContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
SwitchContextValue
Requirement
n/a

UseSwitchOptions

interface
DeclarationView source
UseSwitchOptionsts
export interface UseSwitchOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: Event) => void;
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
readonly ariaLabel?: string;
readonly id?: string;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
id
property
string
optional
name
property
string
optional
onChange
property
(event: Event) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
onChange
Kind
property
Type
(event: Event) => void
Requirement
optional
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional

UseSwitchResult

interface
DeclarationView source
UseSwitchResultts
export interface UseSwitchResult {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
readonly version: () => number;
}
Name
Kind
Type
Requirement
connector
property
SwitchApi
required
scope
property
PartScope
required
service
property
SwitchService
required
version
property
() => number
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Name
scope
Kind
property
Type
PartScope
Requirement
required
Name
service
Kind
property
Type
SwitchService
Requirement
required
Name
version
Kind
property
Type
() => number
Requirement
required

@grassroot/ui-headless-solid/switch

Solid adapter

18 exports
View source packages/ui-headless/solid/src/switch/index.ts
DeclarationView source
SwitchConnectConfigts
export interface SwitchConnectConfig {
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
readonly ariaLabel?: string;
}
Name
Kind
Type
Requirement
ariaLabel
property
string
optional
name
property
string
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Name
name
Kind
property
Type
string
Requirement
optional
Name
required
Kind
property
Type
boolean
Requirement
optional
Name
value
Kind
property
Type
string
Requirement
optional
DeclarationView source
SwitchContextts
export declare const SwitchContext: import("solid-js").Context<SwitchContextValue | undefined>;

SwitchContextValue

interface
DeclarationView source
SwitchContextValuets
export interface SwitchContextValue {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
/**
* Bumped on every committed machine update. Parts must call this
* accessor *inside* the JSX/spread thunk that reads the connector's prop
* bags — not once at setup — so Solid's fine-grained reactivity tracks
* the dependency and re-runs on every committed change.
*/
readonly snapshot: Accessor<SwitchSnapshot>;
/**
* Solid-adapter-internal: `SwitchHiddenInput` reads this alongside
* `snapshot()` to resettle `aria-labelledby`/`aria-describedby` once
* `SwitchLabel`/`SwitchDescription` (if rendered) have registered, and to
* pick up `name`/`value`/`required`/`ariaLabel` changes — see
* `use-switch.ts`'s `relationshipTick` header comment.
*/
readonly relationshipTick: Accessor<number>;
}
Name
Kind
Type
Requirement
Description
connector
property
SwitchApi
required
relationshipTick
property
Accessor<number>
required
Solid-adapter-internal: `SwitchHiddenInput` reads this alongside `snapshot()` to resettle `aria-labelledby`/`aria-describedby` once `SwitchLabel`/`SwitchDescription` (if rendered) have registered, and to pick up `name`/`value`/`required`/`ariaLabel` changes — see `use-switch.ts`'s `relationshipTick` header comment.
scope
property
PartScope
required
service
property
SwitchService
required
snapshot
property
Accessor<SwitchSnapshot>
required
Bumped on every committed machine update. Parts must call this accessor *inside* the JSX/spread thunk that reads the connector's prop bags — not once at setup — so Solid's fine-grained reactivity tracks the dependency and re-runs on every committed change.
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Description
Name
relationshipTick
Kind
property
Type
Accessor<number>
Requirement
required
Description
Solid-adapter-internal: `SwitchHiddenInput` reads this alongside `snapshot()` to resettle `aria-labelledby`/`aria-describedby` once `SwitchLabel`/`SwitchDescription` (if rendered) have registered, and to pick up `name`/`value`/`required`/`ariaLabel` changes — see `use-switch.ts`'s `relationshipTick` header comment.
Name
scope
Kind
property
Type
PartScope
Requirement
required
Description
Name
service
Kind
property
Type
SwitchService
Requirement
required
Description
Name
snapshot
Kind
property
Type
Accessor<SwitchSnapshot>
Requirement
required
Description
Bumped on every committed machine update. Parts must call this accessor *inside* the JSX/spread thunk that reads the connector's prop bags — not once at setup — so Solid's fine-grained reactivity tracks the dependency and re-runs on every committed change.
DeclarationView source
SwitchControlts
export declare const SwitchControl: (props: SwitchPartProps) => JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchPartProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchPartProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
SwitchDescriptionts
export declare const SwitchDescription: (props: SwitchPartProps) => JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchPartProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchPartProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
SwitchHiddenInputts
export declare function SwitchHiddenInput(props?: SwitchHiddenInputProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchHiddenInputProps
optional
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchHiddenInputProps
Requirement
optional
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
SwitchHiddenInputPropsts
export interface SwitchHiddenInputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "checked" | "disabled" | "onChange"> {
}

SwitchLabel

value
DeclarationView source
SwitchLabelts
export declare const SwitchLabel: (props: SwitchPartProps) => JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchPartProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchPartProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

SwitchPartProps

interface
DeclarationView source
SwitchPartPropsts
export interface SwitchPartProps extends JSX.HTMLAttributes<HTMLSpanElement> {
}

SwitchRoot

function
DeclarationView source
SwitchRootts
export declare function SwitchRoot(props: SwitchRootProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchRootProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchRootProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

SwitchRootProps

interface
DeclarationView source
SwitchRootPropsts
export interface SwitchRootProps extends Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
readonly checked?: SwitchInput["checked"];
readonly defaultChecked?: SwitchInput["defaultChecked"];
readonly disabled?: SwitchInput["disabled"];
readonly readOnly?: SwitchInput["readOnly"];
readonly name?: string;
readonly value?: string;
readonly required?: boolean;
/** Accessible-name escape hatch [baseline #17] — see `SwitchLabel` for the primary path. */
readonly ariaLabel?: string;
/**
* Seeds the part scope INSTEAD of the generated id when supplied
* [baseline #10]: `<SwitchRoot id="wifi">` yields deterministic
* `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds
* `useSwitch`'s `id` option — see that primitive's doc comment.
* Intercepted here rather than left in the native passthrough, so it
* configures the scope seed instead of landing on the rendered `<label>`
* as a plain HTML `id` attribute.
*/
readonly id?: string;
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: Event) => void;
readonly children?: JSX.Element;
}
Name
Kind
Type
Requirement
Description
ariaLabel
property
string
optional
Accessible-name escape hatch [baseline #17] — see `SwitchLabel` for the primary path.
checked
property
SwitchInput["checked"]
optional
children
property
JSX.Element
optional
defaultChecked
property
SwitchInput["defaultChecked"]
optional
disabled
property
SwitchInput["disabled"]
optional
id
property
string
optional
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<SwitchRoot id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `useSwitch`'s `id` option — see that primitive's doc comment. Intercepted here rather than left in the native passthrough, so it configures the scope seed instead of landing on the rendered `<label>` as a plain HTML `id` attribute.
name
property
string
optional
onChange
property
(event: Event) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
readOnly
property
SwitchInput["readOnly"]
optional
required
property
boolean
optional
value
property
string
optional
Name
ariaLabel
Kind
property
Type
string
Requirement
optional
Description
Accessible-name escape hatch [baseline #17] — see `SwitchLabel` for the primary path.
Name
checked
Kind
property
Type
SwitchInput["checked"]
Requirement
optional
Description
Name
children
Kind
property
Type
JSX.Element
Requirement
optional
Description
Name
defaultChecked
Kind
property
Type
SwitchInput["defaultChecked"]
Requirement
optional
Description
Name
disabled
Kind
property
Type
SwitchInput["disabled"]
Requirement
optional
Description
Name
id
Kind
property
Type
string
Requirement
optional
Description
Seeds the part scope INSTEAD of the generated id when supplied [baseline #10]: `<SwitchRoot id="wifi">` yields deterministic `hidden-input`/`label`/`description` ids derived from `"wifi"`. Feeds `useSwitch`'s `id` option — see that primitive's doc comment. Intercepted here rather than left in the native passthrough, so it configures the scope seed instead of landing on the rendered `<label>` as a plain HTML `id` attribute.
Name
name
Kind
property
Type
string
Requirement
optional
Description
Name
onChange
Kind
property
Type
(event: Event) => void
Requirement
optional
Description
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional
Description
Name
readOnly
Kind
property
Type
SwitchInput["readOnly"]
Requirement
optional
Description
Name
required
Kind
property
Type
boolean
Requirement
optional
Description
Name
value
Kind
property
Type
string
Requirement
optional
Description
DeclarationView source
SwitchRootProviderts
export declare function SwitchRootProvider(props: SwitchRootProviderProps): JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchRootProviderProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchRootProviderProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a
DeclarationView source
SwitchRootProviderPropsts
export interface SwitchRootProviderProps extends Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, "onChange"> {
/** An existing `useSwitch()` result (advanced composition) — already fully configured. */
readonly value: UseSwitchResult;
readonly children?: JSX.Element;
}
Name
Kind
Type
Requirement
Description
children
property
JSX.Element
optional
value
property
UseSwitchResult
required
An existing `useSwitch()` result (advanced composition) — already fully configured.
Name
children
Kind
property
Type
JSX.Element
Requirement
optional
Description
Name
value
Kind
property
Type
UseSwitchResult
Requirement
required
Description
An existing `useSwitch()` result (advanced composition) — already fully configured.

SwitchThumb

value
DeclarationView source
SwitchThumbts
export declare const SwitchThumb: (props: SwitchPartProps) => JSX.Element;
Name
Kind
Type
Requirement
props
parameter
SwitchPartProps
required
return
return value
JSX.Element
n/a
Name
props
Kind
parameter
Type
SwitchPartProps
Requirement
required
Name
return
Kind
return value
Type
JSX.Element
Requirement
n/a

useSwitch

function
DeclarationView source
useSwitchts
export declare function useSwitch(input: Accessor<SwitchInput>, connectConfig: Accessor<SwitchConnectConfig>, options?: UseSwitchOptions): UseSwitchResult;
Name
Kind
Type
Requirement
input
parameter
Accessor<SwitchInput>
required
connectConfig
parameter
Accessor<SwitchConnectConfig>
required
options
parameter
UseSwitchOptions
optional
return
return value
UseSwitchResult
n/a
Name
input
Kind
parameter
Type
Accessor<SwitchInput>
Requirement
required
Name
connectConfig
Kind
parameter
Type
Accessor<SwitchConnectConfig>
Requirement
required
Name
options
Kind
parameter
Type
UseSwitchOptions
Requirement
optional
Name
return
Kind
return value
Type
UseSwitchResult
Requirement
n/a

useSwitchContext

function
DeclarationView source
useSwitchContextts
export declare function useSwitchContext(partName: string): SwitchContextValue;
Name
Kind
Type
Requirement
partName
parameter
string
required
return
return value
SwitchContextValue
n/a
Name
partName
Kind
parameter
Type
string
Requirement
required
Name
return
Kind
return value
Type
SwitchContextValue
Requirement
n/a

UseSwitchOptions

interface
DeclarationView source
UseSwitchOptionsts
export interface UseSwitchOptions {
readonly onCheckedChange?: (detail: SwitchChangeDetail) => void;
readonly onChange?: (event: Event) => void;
readonly id?: string;
}
Name
Kind
Type
Requirement
id
property
string
optional
onChange
property
(event: Event) => void
optional
onCheckedChange
property
(detail: SwitchChangeDetail) => void
optional
Name
id
Kind
property
Type
string
Requirement
optional
Name
onChange
Kind
property
Type
(event: Event) => void
Requirement
optional
Name
onCheckedChange
Kind
property
Type
(detail: SwitchChangeDetail) => void
Requirement
optional

UseSwitchResult

interface
DeclarationView source
UseSwitchResultts
export interface UseSwitchResult {
readonly service: SwitchService;
readonly connector: SwitchApi;
readonly scope: PartScope;
readonly snapshot: Accessor<SwitchSnapshot>;
/** Compatibility accessor; registration invalidation is owned by the shared factory snapshot. */
readonly relationshipTick: Accessor<number>;
}
Name
Kind
Type
Requirement
Description
connector
property
SwitchApi
required
relationshipTick
property
Accessor<number>
required
Compatibility accessor; registration invalidation is owned by the shared factory snapshot.
scope
property
PartScope
required
service
property
SwitchService
required
snapshot
property
Accessor<SwitchSnapshot>
required
Name
connector
Kind
property
Type
SwitchApi
Requirement
required
Description
Name
relationshipTick
Kind
property
Type
Accessor<number>
Requirement
required
Description
Compatibility accessor; registration invalidation is owned by the shared factory snapshot.
Name
scope
Kind
property
Type
PartScope
Requirement
required
Description
Name
service
Kind
property
Type
SwitchService
Requirement
required
Description
Name
snapshot
Kind
property
Type
Accessor<SwitchSnapshot>
Requirement
required
Description