Askr documentation
Generated API snapshot

@askrjs/ui/switch

Exports from the declarations published in @askrjs/ui. Signatures reflect the published artifact.

Exports

This entrypoint publishes 7 exports. Use the anchored symbol rows for direct links. Type-only exports are labeled separately from runtime values.

Switchtype

Switch: { (props: SwitchButtonProps): JSX.Element; (props: SwitchAsChildProps): JSX.Element; }

Renders the `switch` part of `switch` with `role="switch"`. Supports polymorphic rendering via `asChild`.

SWITCH_A11Y_CONTRACTtype

SWITCH_A11Y_CONTRACT: { readonly ROLE: "switch"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly KEYBOARD_ACTIVATION: readonly ["Space"]; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly DISABLED_ATTRIBUTES: { readonly nativeButton: { readonly disabled: true; readonly "aria-disabled": "true"; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly FORM_INTEGRATION: { readonly host: "button"; readonly hiddenInputType: "checkbox"; readonly hiddenInputValue: "on"; }; }

WAI-ARIA Switch Pattern Specification: https://www.w3.org/WAI/ARIA/apg/patterns/switch/

SwitchA11yContracttype

SwitchA11yContract: typeof SWITCH_A11Y_CONTRACT

Type of the Switch A11y Contract object.

SwitchAsChildPropstype

SwitchAsChildProps: SwitchOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
  type?: never;
}

Props for the `asChild` (polymorphic) rendering of Switch.

asChild
asChild: true;
checked
checked?: boolean | undefined;
children
children: JSXElement;
defaultChecked
defaultChecked?: boolean | undefined;
disabled
disabled?: boolean | undefined;
name
name?: string | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
ref
ref?: Ref<Element>;
required
required?: boolean | undefined;
type
type?: undefined;
value
value?: string | undefined;

SwitchButtonPropstype

SwitchButtonProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick' | 'type' | 'ref'> & SwitchOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
  type?: 'button' | 'submit' | 'reset';
}

Props for Switch Button.

asChild
asChild?: false | undefined;
checked
checked?: boolean | undefined;
children
children?: unknown;
defaultChecked
defaultChecked?: boolean | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
required
required?: boolean | undefined;
type
type?: "button" | "submit" | "reset" | undefined;

SwitchOwnPropstype

SwitchOwnProps: {
  children?: unknown;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}

Own props for Switch, before merging with native element attributes.

checked
checked?: boolean | undefined;
children
children?: unknown;
defaultChecked
defaultChecked?: boolean | undefined;
disabled
disabled?: boolean | undefined;
name
name?: string | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
required
required?: boolean | undefined;
value
value?: string | undefined;

SwitchPropstype

SwitchProps: SwitchButtonProps | SwitchAsChildProps

Props for Switch.

asChild
asChild?: boolean | undefined;
checked
checked?: boolean | undefined;
children
children?: unknown;
defaultChecked
defaultChecked?: boolean | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;
required
required?: boolean | undefined;
type
type?: "button" | "submit" | "reset" | undefined;