Askr documentation
Generated API snapshot

@askrjs/ui

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

Exports

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

Accordiontype

Accordion: (props: AccordionProps) => JSX.Element

Renders a part of `accordion`.

ACCORDION_A11Y_CONTRACTtype

ACCORDION_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly CONTROLS_ATTRIBUTE: "aria-controls"; readonly PANEL_ROLE: "region"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }

WAI-ARIA accordion/disclosure contract.

AccordionA11yContracttype

AccordionA11yContract: typeof ACCORDION_A11Y_CONTRACT

Type of the Accordion A11y Contract object.

AccordionContenttype

AccordionContent: { (props: AccordionContentProps): JSX.Element | null; (props: AccordionContentAsChildProps): JSX.Element | null; }

Renders the `accordion-content` part of `accordion` with `role="region"`. Supports polymorphic rendering via `asChild`.

AccordionContentAsChildPropstype

AccordionContentAsChildProps: BoxAsChildProps & AccordionContentOwnProps

Props for the `asChild` (polymorphic) rendering of Accordion Content.

asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;

AccordionContentOwnPropstype

AccordionContentOwnProps: {
  forceMount?: boolean;
}

Own props for Accordion Content, before merging with native element attributes.

forceMount
forceMount?: boolean | undefined;

AccordionContentPropstype

AccordionContentProps: BoxProps<'div', HTMLDivElement> & AccordionContentOwnProps

Props for Accordion Content.

asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;

AccordionHeadertype

AccordionHeader: { (props: AccordionHeaderProps): JSX.Element; (props: AccordionHeaderAsChildProps): JSX.Element; }

Renders the `accordion-header` part of `accordion`. Supports polymorphic rendering via `asChild`.

AccordionHeaderAsChildPropstype

AccordionHeaderAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Accordion Header.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

AccordionHeaderPropstype

AccordionHeaderProps: BoxProps<'h3', HTMLHeadingElement>

Props for Accordion Header.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLHeadingElement>;

AccordionItemtype

AccordionItem: (props: AccordionItemProps) => JSX.Element

Renders the `accordion-item` part of `accordion`.

AccordionItemOwnPropstype

AccordionItemOwnProps: {
  children?: unknown;
  value: string;
  disabled?: boolean;
}

Own props for Accordion Item, before merging with native element attributes.

children
children?: unknown;
disabled
disabled?: boolean | undefined;
value
value: string;

AccordionItemPropstype

AccordionItemProps: BoxProps<'div', HTMLDivElement> & AccordionItemOwnProps

Props for Accordion Item.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
value
value: string;

AccordionMultiplePropstype

AccordionMultipleProps: BoxProps<'div', HTMLDivElement> & AccordionSharedOwnProps & {
  type: 'multiple';
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
}

Props for Accordion Multiple.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
collapsible
collapsible?: boolean | undefined;
defaultValue
defaultValue?: string[] | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string[]) => void) | undefined;
orientation
orientation?: AccordionOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type: "multiple";
value
value?: string[] | undefined;

AccordionPropstype

AccordionProps: AccordionSingleProps | AccordionMultipleProps

Props for Accordion.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
collapsible
collapsible?: boolean | undefined;
defaultValue
defaultValue?: string | string[] | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string[]) => void) | ((value: string) => void) | undefined;
orientation
orientation?: AccordionOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type?: "single" | "multiple" | undefined;
value
value?: string | string[] | undefined;

AccordionSinglePropstype

AccordionSingleProps: BoxProps<'div', HTMLDivElement> & AccordionSharedOwnProps & {
  type?: 'single';
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}

Props for Accordion Single.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
collapsible
collapsible?: boolean | undefined;
defaultValue
defaultValue?: string | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
orientation
orientation?: AccordionOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type?: "single" | undefined;
value
value?: string | undefined;

AccordionTriggertype

AccordionTrigger: { (props: AccordionTriggerProps): JSX.Element; (props: AccordionTriggerAsChildProps): JSX.Element; }

Renders the `accordion-trigger` part of `accordion`. Supports polymorphic rendering via `asChild`.

AccordionTriggerAsChildPropstype

AccordionTriggerAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Accordion Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

AccordionTriggerPropstype

AccordionTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Accordion Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

ALERT_DIALOG_A11Y_CONTRACTtype

ALERT_DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "alertdialog"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly ACTION_REQUIREMENTS: { readonly hasPrimaryAction: true; readonly hasCancelAction: true; }; }

Alert dialog accessibility contract.

AlertDialogtype

AlertDialog: (props: AlertDialogProps) => JSX.Element

Renders a part of `alert-dialog`.

AlertDialogA11yContracttype

AlertDialogA11yContract: typeof ALERT_DIALOG_A11Y_CONTRACT

Type of the Alert Dialog A11y Contract object.

AlertDialogActiontype

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogActionAsChildPropstype

AlertDialogActionAsChildProps: DialogCloseAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Action.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

AlertDialogActionPropstype

AlertDialogActionProps: DialogCloseProps

Props for Alert Dialog Action.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

AlertDialogCanceltype

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogCancelAsChildPropstype

AlertDialogCancelAsChildProps: DialogCloseAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Cancel.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

AlertDialogCancelPropstype

AlertDialogCancelProps: DialogCloseProps

Props for Alert Dialog Cancel.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

AlertDialogContenttype

AlertDialogContent: (props: AlertDialogContentProps | AlertDialogContentAsChildProps) => JSX.Element

Renders a part of `alert-dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogContentAsChildPropstype

AlertDialogContentAsChildProps: DialogContentAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Content.

asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<Element>;
role
role?: "alertdialog" | "dialog" | undefined;

AlertDialogContentOwnPropstype

AlertDialogContentOwnProps: DialogContentOwnProps

Own props for Alert Dialog Content, before merging with native element attributes.

forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
role
role?: "alertdialog" | "dialog" | undefined;

AlertDialogContentPropstype

AlertDialogContentProps: DialogContentProps

Props for Alert Dialog Content.

asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<HTMLDivElement>;
role
role?: "alertdialog" | "dialog" | undefined;

AlertDialogDescriptiontype

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the `dialog-description` part of `dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogDescriptionAsChildPropstype

AlertDialogDescriptionAsChildProps: DialogDescriptionAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Description.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

AlertDialogDescriptionPropstype

AlertDialogDescriptionProps: DialogDescriptionProps

Props for Alert Dialog Description.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLParagraphElement>;

AlertDialogOverlaytype

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

Renders the `dialog-overlay` part of `dialog`. With `@askrjs/themes/default`, the overlay is fully styled out of the box with the shared backdrop token, blur, stacking, and fade animation. Standard Dialog and AlertDialog usage requires no additional overlay CSS; customize the theme tokens instead of applying a competing background class. Supports polymorphic rendering via `asChild`.

AlertDialogOverlayAsChildPropstype

AlertDialogOverlayAsChildProps: DialogOverlayAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Overlay.

asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;

AlertDialogOverlayOwnPropstype

AlertDialogOverlayOwnProps: DialogOverlayOwnProps

Own props for Alert Dialog Overlay, before merging with native element attributes.

forceMount
forceMount?: boolean | undefined;

AlertDialogOverlayPropstype

AlertDialogOverlayProps: DialogOverlayProps

Props for Alert Dialog Overlay.

asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;

AlertDialogOwnPropstype

AlertDialogOwnProps: DialogProps

Own props for Alert Dialog, before merging with native element attributes.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
modal
modal?: boolean | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

AlertDialogPortaltype

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

AlertDialogPortalPropstype

AlertDialogPortalProps: DialogPortalProps

Props for Alert Dialog Portal.

children
children?: unknown;

AlertDialogPropstype

AlertDialogProps: DialogProps

Props for Alert Dialog.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
modal
modal?: boolean | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

AlertDialogTitletype

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the `dialog-title` part of `dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogTitleAsChildPropstype

AlertDialogTitleAsChildProps: DialogTitleAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Title.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

AlertDialogTitlePropstype

AlertDialogTitleProps: DialogTitleProps

Props for Alert Dialog Title.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLHeadingElement>;

AlertDialogTriggertype

AlertDialogTrigger: (props: AlertDialogTriggerProps | AlertDialogTriggerAsChildProps) => JSX.Element

Renders a part of `alert-dialog`. Supports polymorphic rendering via `asChild`.

AlertDialogTriggerAsChildPropstype

AlertDialogTriggerAsChildProps: DialogTriggerAsChildProps

Props for the `asChild` (polymorphic) rendering of Alert Dialog Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

AlertDialogTriggerPropstype

AlertDialogTriggerProps: DialogTriggerProps

Props for Alert Dialog Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

Avatartype

Avatar: { (props: AvatarProps): JSX.Element; (props: AvatarAsChildProps): JSX.Element; }

Renders the `avatar` part of `avatar`. Supports polymorphic rendering via `asChild`.

AVATAR_A11Y_CONTRACTtype

AVATAR_A11Y_CONTRACT: { readonly ROOT: { readonly slot: "data-slot"; readonly marker: "data-avatar"; }; readonly IMAGE: { readonly slot: "data-slot"; readonly marker: "data-avatar-image"; readonly requiresAlt: true; }; readonly FALLBACK: { readonly slot: "data-slot"; readonly marker: "data-avatar-fallback"; readonly visibleBeforeImageLoad: true; }; }

Accessibility contract for Avatar primitives.

AvatarA11yContracttype

AvatarA11yContract: typeof AVATAR_A11Y_CONTRACT

Type of the Avatar A11y Contract object.

AvatarAsChildPropstype

AvatarAsChildProps: BoxAsChildProps & AvatarOwnProps

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

asChild
asChild: true;
children
children: JSXElement;
id
id?: string | undefined;
ref
ref?: Ref<Element>;

AvatarFallbacktype

AvatarFallback: { (props: AvatarFallbackProps): JSX.Element | null; (props: AvatarFallbackAsChildProps): JSX.Element | null; }

Renders the `avatar-fallback` part of `avatar`. Supports polymorphic rendering via `asChild`.

AvatarFallbackAsChildPropstype

AvatarFallbackAsChildProps: BoxAsChildProps & AvatarFallbackOwnProps

Props for the `asChild` (polymorphic) rendering of Avatar Fallback.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

AvatarFallbackOwnPropstype

AvatarFallbackOwnProps: {
  children?: unknown;
}

Own props for Avatar Fallback, before merging with native element attributes.

children
children?: unknown;

AvatarFallbackPropstype

AvatarFallbackProps: BoxProps<'span', HTMLSpanElement> & AvatarFallbackOwnProps

Props for Avatar Fallback.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLSpanElement>;

AvatarImagetype

AvatarImage: (props: AvatarImageProps) => JSX.Element

Renders the `avatar-image` part of `avatar`.

AvatarImageOwnPropstype

AvatarImageOwnProps: {
  src?: string;
  alt: string;
  onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
}

Own props for Avatar Image, before merging with native element attributes.

alt
alt: string;
onLoadingStatusChange
onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;
src
src?: string | undefined;

AvatarImagePropstype

AvatarImageProps: Omit<JSX.IntrinsicElements['img'], 'children' | 'ref' | 'onLoad' | 'onError' | 'alt' | 'src'> & AvatarImageOwnProps & {
  ref?: Ref<HTMLImageElement>;
}

Props for Avatar Image.

alt
alt: string;
onLoadingStatusChange
onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;
ref
ref?: Ref<HTMLImageElement>;
src
src?: string | undefined;

AvatarLoadingStatustype

AvatarLoadingStatus: 'idle' | 'loading' | 'loaded' | 'error'

Avatar Loading Status.

AvatarOwnPropstype

AvatarOwnProps: {
  children?: unknown;
  id?: string;
}

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

children
children?: unknown;
id
id?: string | undefined;

AvatarPropstype

AvatarProps: BoxProps<'span', HTMLSpanElement> & AvatarOwnProps

Props for Avatar.

asChild
asChild?: false | undefined;
children
children?: unknown;
id
id?: string | undefined;
ref
ref?: Ref<HTMLSpanElement>;

Buttontype

Button: { (props: ButtonNativeProps): JSX.Element; (props: ButtonAsChildProps): JSX.Element; }

Headless Button component ## Responsibilities - Compose pressable foundation for interaction behavior - Enforce type="button" default to prevent accidental form submission - Forward props and refs to native button or child element ## Non-Responsibilities (delegated to pressable foundation) - Keyboard event handling (Enter/Space) - Pointer event handling - Disabled state enforcement - ARIA attribute application ## Invariants - MUST NOT contain any event handler logic - MUST NOT check disabled prop directly - MUST use pressable() for ALL interaction behavior - MUST use mergeProps() for ALL prop composition Renders the `button` part of `button`. Supports polymorphic rendering via `asChild`.

Native button (prevents accidental submit)
```tsx
<Button onPress={handleSave}>Save</Button>
```
Explicit form submission
```tsx
<Button type="submit" onPress={handleSubmit}>Submit</Button>
```
Polymorphic rendering (asChild)
```tsx
<Button asChild onPress={handleNav}>
<a href="/home">Home</a>
</Button>
```

BUTTON_A11Y_CONTRACTtype

BUTTON_A11Y_CONTRACT: { readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly ROLE: "button"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "aria-disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "focusable"; readonly disabled: "not-focusable"; }; }

Accessibility contract for Button component Following WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/ ## Role - Native <button>: implicit role="button" - asChild: preserves child role (e.g., role="button" on <div>) ## States - disabled (native): uses `disabled` attribute - disabled (asChild): uses `aria-disabled="true"` + `tabindex="-1"` ## Keyboard - Space: Activates button (handled by pressable foundation) - Enter: Activates button (handled by pressable foundation) - Disabled buttons do not respond to interaction ## Focus - Native buttons: focusable by default - asChild elements: receive tabindex if not naturally focusable - Disabled: removed from tab order (tabindex="-1" or native disabled) ## Screen Reader - Announces role as "button" - Announces disabled state - Announces accessible name from text content or aria-label ## Implementation Notes - All interaction behavior is delegated to `pressable` foundation - Button component does NOT implement keyboard handling directly - Button component does NOT check disabled prop directly - All ARIA attributes are applied by foundation, not component

ButtonA11yContracttype

ButtonA11yContract: typeof BUTTON_A11Y_CONTRACT

Type-safe accessibility contract

ButtonAsChildPropstype

ButtonAsChildProps: ButtonOwnProps & {
  asChild: true;
  children: ButtonAsChildElement;
  ref?: Ref<Element>;
  type?: never;
}

Props when rendering with asChild (polymorphic)

asChild
asChild: true;
children
children: ButtonAsChildElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
size
size?: ButtonSize | undefined;
type
type?: undefined;
variant
variant?: ButtonVariant | undefined;
width
width?: ButtonWidth | undefined;

ButtonNativePropstype

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

Props when rendering as native <button>

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
size
size?: ButtonSize | undefined;
type
type?: "button" | "submit" | "reset" | undefined;
variant
variant?: ButtonVariant | undefined;
width
width?: ButtonWidth | undefined;

ButtonOwnPropstype

ButtonOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  disabled?: boolean;
  variant?: ButtonVariant;
  size?: ButtonSize;
  width?: ButtonWidth;
}

Core Button props shared across all variants

children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
size
size?: ButtonSize | undefined;
variant
variant?: ButtonVariant | undefined;
width
width?: ButtonWidth | undefined;

ButtonPropstype

ButtonProps: ButtonNativeProps | ButtonAsChildProps

Union of all Button prop variants

asChild
asChild?: boolean | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;
size
size?: ButtonSize | undefined;
type
type?: "button" | "submit" | "reset" | undefined;
variant
variant?: ButtonVariant | undefined;
width
width?: ButtonWidth | undefined;

ButtonSizetype

ButtonSize: 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'

Button Size.

ButtonVarianttype

ButtonVariant: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link'

Button Variant.

ButtonWidthtype

ButtonWidth: 'auto' | 'full'

Button Width.

Checkboxtype

Checkbox: { (props: CheckboxInputProps): JSX.Element; (props: CheckboxAsChildProps): JSX.Element; }

Headless Checkbox component ## Responsibilities - Apply aria-checked for checkbox state signaling - Handle indeterminate state for native and asChild hosts - Support controlled and uncontrolled checked state - Forward props and refs to native input or child element - Preserve native checkbox semantics and apply checkbox behavior to asChild hosts ## Non-Responsibilities - Form submission orchestration beyond native input props ## Invariants - MUST NOT add role="button" (native inputs are role="checkbox") - checked state may be controlled or uncontrolled - indeterminate overrides checked for state signaling - For asChild, consumer MUST provide role="checkbox" Renders the `checkbox` part of `checkbox` with `role="checkbox"`. Supports polymorphic rendering via `asChild`.

Native checkbox input
```tsx
const checked = state(false);
<Checkbox checked={checked()} onPress={() => checked.set(!checked())} />
```
Polymorphic rendering (asChild)
```tsx
<Checkbox asChild checked={agreed} onPress={toggleAgree}>
<div role="checkbox">I agree to terms</div>
</Checkbox>
```
Indeterminate state (partial selection)
```tsx
<Checkbox checked={someChecked} indeterminate={!allChecked && someChecked} onPress={toggleAll}>
Select All
</Checkbox>
```

CHECKBOX_A11Y_CONTRACTtype

CHECKBOX_A11Y_CONTRACT: { readonly ROLE: "checkbox"; readonly KEYBOARD_ACTIVATION: readonly ["Space"]; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly INDETERMINATE_VALUE: "mixed"; readonly DISABLED_ATTRIBUTES: { readonly nativeInput: { readonly disabled: true; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly DATA_ATTRIBUTES: { readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "tabIndex >= 0"; readonly disabled: "tabIndex = -1"; readonly visualIndicator: "required"; }; }

WAI-ARIA Checkbox Pattern Specification: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ A checkbox is an input mechanism that allows users to select one or more items from a set. Unlike toggle buttons, checkboxes visually represent a checked state with aria-checked (not aria-pressed). ## Required ARIA - aria-checked: 'true' | 'false' | 'mixed' (indicates checkbox state) - role: 'checkbox' (when not native input) ## Keyboard Support - Space: Activates checkbox - Enter: Does not activate checkbox ## Focus Management - Checkbox is focusable when not disabled - Visual focus indicator required ## Disabled State - aria-disabled when disabled=true (for non-native) - disabled attribute when native input - Removed from tab order - Visual disabled styling (consumer responsibility) ## Indeterminate State - `asChild`: aria-checked='mixed' - native input: current host path omits aria-checked and keeps data-state='indeterminate' - Typically used for "select all" checkboxes when partial selection

CheckboxA11yContracttype

CheckboxA11yContract: typeof CHECKBOX_A11Y_CONTRACT

Type of the Checkbox A11y Contract object.

CheckboxAsChildPropstype

CheckboxAsChildProps: CheckboxOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

Props when rendering via asChild

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

CheckboxInputPropstype

CheckboxInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'onClick' | 'disabled' | 'type' | 'ref' | 'checked' | 'name' | 'value' | 'required'> & CheckboxOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}

Props when rendering as a native <input type="checkbox"> element

asChild
asChild?: false | undefined;
checked
checked?: boolean | undefined;
children
children?: unknown;
defaultChecked
defaultChecked?: boolean | undefined;
disabled
disabled?: boolean | undefined;
indeterminate
indeterminate?: boolean | undefined;
name
name?: string | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLInputElement>;
required
required?: boolean | undefined;
value
value?: string | undefined;

CheckboxOwnPropstype

CheckboxOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  indeterminate?: boolean;
  disabled?: boolean;
  required?: boolean;
  name?: string;
  value?: string;
}

Props shared by all Checkbox variants

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

CheckboxPropstype

CheckboxProps: CheckboxInputProps | CheckboxAsChildProps

Discriminated union of Checkbox prop types

asChild
asChild?: boolean | undefined;
checked
checked?: boolean | undefined;
children
children?: unknown;
defaultChecked
defaultChecked?: boolean | undefined;
disabled
disabled?: boolean | undefined;
indeterminate
indeterminate?: boolean | undefined;
name
name?: string | undefined;
onCheckedChange
onCheckedChange?: ((checked: boolean) => void) | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;
required
required?: boolean | undefined;
value
value?: string | undefined;

Collapsibletype

Collapsible: (props: CollapsibleProps) => JSX.Element

Renders a part of `collapsible`.

COLLAPSIBLE_A11Y_CONTRACTtype

COLLAPSIBLE_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly CONTROLS_ATTRIBUTE: "aria-controls"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly CONTENT_REQUIREMENTS: { readonly idAttribute: "required"; readonly defaultPresence: "unmounted when closed"; }; readonly FOCUS_RULES: { readonly afterActivation: "focus remains on trigger"; readonly contentFocusable: false; }; }

WAI-ARIA Disclosure Pattern (Collapsible) Specification: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ A disclosure (collapsible) shows and hides a region of content via a button. The button indicates the visibility state of the content region. ## Required ARIA - Trigger: role="button" (native or explicit) - Trigger: aria-expanded="true" | "false" - Trigger: aria-controls={contentId} - Content: id attribute for aria-controls reference ## Keyboard Support - Enter: Toggles content visibility (on trigger) - Space: Toggles content visibility (on trigger) ## Focus Management - Trigger is focusable when not disabled - Focus remains on trigger after activation - Content is not focusable by default ## Disabled State - Trigger cannot be activated when disabled - Visual disabled styling (consumer responsibility) ## Presence - Content unmounts when closed (default) - Can force mount for animation/transition control

CollapsibleContenttype

CollapsibleContent: { (props: CollapsibleContentProps): JSX.Element | null; (props: CollapsibleContentAsChildProps): JSX.Element | null; }

Renders the `collapsible-content` part of `collapsible`. Supports polymorphic rendering via `asChild`.

CollapsibleContentAsChildPropstype

CollapsibleContentAsChildProps: any

Props for the `asChild` (polymorphic) rendering of Collapsible Content.

asChild
Render as child element instead of div
children
Child content
forceMount
Force mount even when closed (for animation)
ref
Ref forwarding

CollapsibleContentPropstype

CollapsibleContentProps: any

Content component props

asChild
Render as child element instead of div
children
Child content
forceMount
Force mount even when closed (for animation)
ref
Ref forwarding

CollapsiblePropstype

CollapsibleProps: any

Root component props

children
Child components (Trigger, Content)
defaultOpen
Uncontrolled default open state
disabled
Whether the collapsible is disabled
id
Stable caller-provided identity used for ARIA linking when available
onOpenChange
Callback when open state changes
open
Controlled open state

CollapsibleTriggertype

CollapsibleTrigger: { (props: CollapsibleTriggerProps): JSX.Element; (props: CollapsibleTriggerAsChildProps): JSX.Element; }

Renders the `collapsible-trigger` part of `collapsible`. Supports polymorphic rendering via `asChild`.

CollapsibleTriggerAsChildPropstype

CollapsibleTriggerAsChildProps: any

Props for the `asChild` (polymorphic) rendering of Collapsible Trigger.

asChild
Render as child element instead of button
children
Child content
ref
Ref forwarding

CollapsibleTriggerPropstype

CollapsibleTriggerProps: any

Trigger component props (button semantics)

asChild
Render as child element instead of button
children
Child content
ref
Ref forwarding

DebouncedInputtype

DebouncedInput: (props: DebouncedInputProps) => JSX.Element

DebouncedInput is a convenience wrapper around Input that emits a settled value for search and filter surfaces.

DebouncedInputPropstype

DebouncedInputProps: Omit<InputInputProps, 'onInput' | 'type'> & {
  type?: JSX.IntrinsicElements['input']['type'];
  debounceMs?: number;
  onInput?: (event: InputEvent) => void;
  onDebouncedInput?: (value: string) => void;
}

Props for Debounced Input.

asChild
asChild?: false | undefined;
children
children?: unknown;
debounceMs
debounceMs?: number | undefined;
onDebouncedInput
onDebouncedInput?: ((value: string) => void) | undefined;
onInput
onInput?: ((event: InputEvent) => void) | undefined;
ref
ref?: Ref<HTMLInputElement>;
type
type?: ReactiveProp<IntrinsicTextValue>;

Dialogtype

Dialog: (props: DialogProps) => JSX.Element

Coordinates the Dialog trigger, portal, overlay, and content.

```tsx
<Dialog>
  <DialogTrigger>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent>Confirm action</DialogContent>
  </DialogPortal>
</Dialog>
```

DIALOG_A11Y_CONTRACTtype

DIALOG_A11Y_CONTRACT: { readonly CONTENT_ROLE: "dialog"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly MODAL_ATTRIBUTE: "aria-modal"; readonly LABELLED_BY_ATTRIBUTE: "aria-labelledby"; readonly DESCRIBED_BY_ATTRIBUTE: "aria-describedby"; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; }

Dialog accessibility contract.

DialogA11yContracttype

DialogA11yContract: typeof DIALOG_A11Y_CONTRACT

Type of the Dialog A11y Contract object.

DialogClosetype

DialogClose: { (props: DialogCloseProps): JSX.Element; (props: DialogCloseAsChildProps): JSX.Element; }

Renders the `dialog-close` part of `dialog`. Supports polymorphic rendering via `asChild`.

DialogCloseAsChildPropstype

DialogCloseAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Dialog Close.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

DialogClosePropstype

DialogCloseProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Dialog Close.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

DialogContenttype

DialogContent: { (props: DialogContentProps): JSX.Element | null; (props: DialogContentAsChildProps): JSX.Element | null; }

Renders the `dialog-content` part of `dialog`. Supports polymorphic rendering via `asChild`.

DialogContentAsChildPropstype

DialogContentAsChildProps: BoxAsChildProps & DialogContentOwnProps

Props for the `asChild` (polymorphic) rendering of Dialog Content.

asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<Element>;
role
role?: "alertdialog" | "dialog" | undefined;

DialogContentOwnPropstype

DialogContentOwnProps: {
  forceMount?: boolean;
  role?: 'dialog' | 'alertdialog';
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}

Own props for Dialog Content, before merging with native element attributes.

forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
role
role?: "alertdialog" | "dialog" | undefined;

DialogContentPropstype

DialogContentProps: BoxProps<'div', HTMLDivElement> & DialogContentOwnProps

Props for Dialog Content.

asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<HTMLDivElement>;
role
role?: "alertdialog" | "dialog" | undefined;

DialogDescriptiontype

DialogDescription: { (props: DialogDescriptionProps): JSX.Element; (props: DialogDescriptionAsChildProps): JSX.Element; }

Renders the `dialog-description` part of `dialog`. Supports polymorphic rendering via `asChild`.

DialogDescriptionAsChildPropstype

DialogDescriptionAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Dialog Description.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

DialogDescriptionPropstype

DialogDescriptionProps: BoxProps<'p', HTMLParagraphElement>

Props for Dialog Description.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLParagraphElement>;

DialogOverlaytype

DialogOverlay: { (props: DialogOverlayProps): JSX.Element | null; (props: DialogOverlayAsChildProps): JSX.Element | null; }

Renders the `dialog-overlay` part of `dialog`. With `@askrjs/themes/default`, the overlay is fully styled out of the box with the shared backdrop token, blur, stacking, and fade animation. Standard Dialog and AlertDialog usage requires no additional overlay CSS; customize the theme tokens instead of applying a competing background class. Supports polymorphic rendering via `asChild`.

DialogOverlayAsChildPropstype

DialogOverlayAsChildProps: BoxAsChildProps & DialogOverlayOwnProps

Props for the `asChild` (polymorphic) rendering of Dialog Overlay.

asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;

DialogOverlayOwnPropstype

DialogOverlayOwnProps: {
  forceMount?: boolean;
}

Own props for Dialog Overlay, before merging with native element attributes.

forceMount
forceMount?: boolean | undefined;

DialogOverlayPropstype

DialogOverlayProps: BoxProps<'div', HTMLDivElement> & DialogOverlayOwnProps

Props for Dialog Overlay.

asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;

DialogOwnPropstype

DialogOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  modal?: boolean;
}

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

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
modal
modal?: boolean | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

DialogPortaltype

DialogPortal: (props: DialogPortalProps) => JSX.Element | null

Renders a part of `dialog`.

DialogPortalPropstype

DialogPortalProps: {
  children?: unknown;
}

Props for Dialog Portal.

children
children?: unknown;

DialogPropstype

DialogProps: DialogOwnProps

Props for Dialog.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
modal
modal?: boolean | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

DialogTitletype

DialogTitle: { (props: DialogTitleProps): JSX.Element; (props: DialogTitleAsChildProps): JSX.Element; }

Renders the `dialog-title` part of `dialog`. Supports polymorphic rendering via `asChild`.

DialogTitleAsChildPropstype

DialogTitleAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Dialog Title.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

DialogTitlePropstype

DialogTitleProps: BoxProps<'h2', HTMLHeadingElement>

Props for Dialog Title.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLHeadingElement>;

DialogTriggertype

DialogTrigger: { (props: DialogTriggerProps): JSX.Element; (props: DialogTriggerAsChildProps): JSX.Element; }

Renders the `dialog-trigger` part of `dialog`. Supports polymorphic rendering via `asChild`.

DialogTriggerAsChildPropstype

DialogTriggerAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Dialog Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

DialogTriggerPropstype

DialogTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Dialog Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

DISMISSABLE_LAYER_A11Y_CONTRACTtype

DISMISSABLE_LAYER_A11Y_CONTRACT: { readonly DISMISS_EVENTS: readonly ["escape-key", "outside-pointer"]; readonly INTERACTION_POLICY: "background-dismissable"; }

Dismissable layer accessibility contract.

DismissableLayertype

DismissableLayer: { (props: DismissableLayerProps): JSX.Element; (props: DismissableLayerAsChildProps): JSX.Element; }

Renders a part of `dismissable-layer`. Supports polymorphic rendering via `asChild`.

DismissableLayerA11yContracttype

DismissableLayerA11yContract: typeof DISMISSABLE_LAYER_A11Y_CONTRACT

Type of the Dismissable Layer A11y Contract object.

DismissableLayerAsChildPropstype

DismissableLayerAsChildProps: DismissableLayerOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

Props for the `asChild` (polymorphic) rendering of Dismissable Layer.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
disableOutsidePointerEvents
disableOutsidePointerEvents?: boolean | undefined;
id
id?: string | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<Element>;

DismissableLayerOwnPropstype

DismissableLayerOwnProps: {
  children?: unknown;
  id?: string;
  disabled?: boolean;
  disableOutsidePointerEvents?: boolean;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}

Own props for Dismissable Layer, before merging with native element attributes.

children
children?: unknown;
disabled
disabled?: boolean | undefined;
disableOutsidePointerEvents
disableOutsidePointerEvents?: boolean | undefined;
id
id?: string | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

DismissableLayerPropstype

DismissableLayerProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & DismissableLayerOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}

Props for Dismissable Layer.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
disableOutsidePointerEvents
disableOutsidePointerEvents?: boolean | undefined;
id
id?: string | undefined;
onDismiss
onDismiss?: (() => void) | undefined;
onEscapeKeyDown
onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
onInteractOutside
onInteractOutside?: ((event: Event) => void) | undefined;
onPointerDownOutside
onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
ref
ref?: Ref<HTMLDivElement>;

DropdownContenttype

DropdownContent: { (props: DropdownContentProps): JSX.Element | null; (props: DropdownContentAsChildProps): JSX.Element | null; }

Renders a part of `dropdown`. Supports polymorphic rendering via `asChild`.

DropdownContentAsChildPropstype

DropdownContentAsChildProps: BoxAsChildProps & DropdownContentOwnProps

Props for the `asChild` (polymorphic) rendering of Dropdown Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

DropdownContentOwnPropstype

DropdownContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}

Own props for Dropdown Content, before merging with native element attributes.

align
align?: OverlayAlign | undefined;
forceMount
forceMount?: boolean | undefined;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

DropdownContentPropstype

DropdownContentProps: BoxProps<'div', HTMLDivElement> & DropdownContentOwnProps

Props for Dropdown Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

FOCUS_SCOPE_A11Y_CONTRACTtype

FOCUS_SCOPE_A11Y_CONTRACT: { readonly FEATURES: { readonly trapped: true; readonly loop: true; readonly autoFocus: true; readonly restoreFocus: true; }; }

Focus scope accessibility contract.

FocusScopetype

FocusScope: { (props: FocusScopeProps): JSX.Element; (props: FocusScopeAsChildProps): JSX.Element; }

Renders a part of `focus-scope`. Supports polymorphic rendering via `asChild`.

FocusScopeA11yContracttype

FocusScopeA11yContract: typeof FOCUS_SCOPE_A11Y_CONTRACT

Type of the Focus Scope A11y Contract object.

FocusScopeAsChildPropstype

FocusScopeAsChildProps: FocusScopeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

Props for the `asChild` (polymorphic) rendering of Focus Scope.

asChild
asChild: true;
autoFocus
autoFocus?: boolean | undefined;
children
children: JSXElement;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
ref
ref?: Ref<Element>;
restoreFocus
restoreFocus?: boolean | undefined;
tabIndex
tabIndex?: number | undefined;
trapped
trapped?: boolean | undefined;

FocusScopeOwnPropstype

FocusScopeOwnProps: {
  children?: unknown;
  trapped?: boolean;
  loop?: boolean;
  autoFocus?: boolean;
  restoreFocus?: boolean;
  id?: string;
  tabIndex?: number;
}

Own props for Focus Scope, before merging with native element attributes.

autoFocus
autoFocus?: boolean | undefined;
children
children?: unknown;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
restoreFocus
restoreFocus?: boolean | undefined;
tabIndex
tabIndex?: number | undefined;
trapped
trapped?: boolean | undefined;

FocusScopePropstype

FocusScopeProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & FocusScopeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}

Props for Focus Scope.

asChild
asChild?: false | undefined;
autoFocus
autoFocus?: boolean | undefined;
children
children?: unknown;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
restoreFocus
restoreFocus?: boolean | undefined;
tabIndex
tabIndex?: number | undefined;
trapped
trapped?: boolean | undefined;

Formtype

Form: { (props: FormProps): JSX.Element; (props: FormAsChildProps): JSX.Element; }

Renders a part of `form`. Supports polymorphic rendering via `asChild`.

FormAsChildPropstype

FormAsChildProps: Omit<JSX.IntrinsicElements['form'], 'children' | 'ref'> & FormOwnProps & {
  asChild: true;
  children: JSX.Element;
  ref?: import('@askrjs/askr/foundations/utilities').Ref<Element>;
}

`asChild` keeps the form host supplied by the consumer, while retaining the native form attribute contract (method, action, target, encoding, etc.).

asChild
asChild: true;
children
children: JSX.Element;
ref
ref?: Ref<Element>;

FormPropstype

FormProps: BoxProps<'form', HTMLFormElement> & FormOwnProps

Props for Form.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLFormElement>;

HoverCardtype

HoverCard: (props: HoverCardProps) => JSX.Element

Renders a part of `hover-card`.

HoverCardAsChildPropstype

HoverCardAsChildProps: HoverCardOwnProps & {
  asChild: true;
  children: JSX.Element;
}

Props for the `asChild` (polymorphic) rendering of Hover Card.

asChild
asChild: true;
children
children: JSX.Element;
closeDelay
closeDelay?: number | undefined;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;
openDelay
openDelay?: number | undefined;

HoverCardContenttype

HoverCardContent: { (props: HoverCardContentProps): JSX.Element | null; (props: HoverCardContentAsChildProps): JSX.Element | null; }

Renders the `hover-card-content` part of `hover-card` with `role="dialog"`. Supports polymorphic rendering via `asChild`.

HoverCardContentAsChildPropstype

HoverCardContentAsChildProps: BoxAsChildProps & HoverCardContentOwnProps

Props for the `asChild` (polymorphic) rendering of Hover Card Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

HoverCardContentPropstype

HoverCardContentProps: BoxProps<'div', HTMLDivElement> & HoverCardContentOwnProps

Props for Hover Card Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

HoverCardOwnPropstype

HoverCardOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  openDelay?: number;
  closeDelay?: number;
}

Own props for Hover Card, before merging with native element attributes.

children
children?: unknown;
closeDelay
closeDelay?: number | undefined;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;
openDelay
openDelay?: number | undefined;

HoverCardPortaltype

HoverCardPortal: (props: HoverCardPortalProps) => JSX.Element | null

Renders a part of `hover-card`.

HoverCardPortalPropstype

HoverCardPortalProps: {
  children?: unknown;
}

Props for Hover Card Portal.

children
children?: unknown;

HoverCardPropstype

HoverCardProps: HoverCardOwnProps

Props for Hover Card.

children
children?: unknown;
closeDelay
closeDelay?: number | undefined;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;
openDelay
openDelay?: number | undefined;

HoverCardTriggertype

HoverCardTrigger: { (props: HoverCardTriggerProps): JSX.Element; (props: HoverCardTriggerAsChildProps): JSX.Element; }

Renders the `hover-card-trigger` part of `hover-card`. Supports polymorphic rendering via `asChild`.

HoverCardTriggerAsChildPropstype

HoverCardTriggerAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Hover Card Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

HoverCardTriggerPropstype

HoverCardTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Hover Card Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

Inputtype

Input: { (props: InputInputProps): JSX.Element; (props: InputAsChildProps): JSX.Element; }

Renders the `input` part of `input`. Supports polymorphic rendering via `asChild`.

INPUT_A11Y_CONTRACTtype

INPUT_A11Y_CONTRACT: { readonly HOST_ELEMENT: "input"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly defaultTabIndex: 0; readonly disabledTabIndex: -1; }; readonly LABELING: { readonly supportsLabelElement: true; readonly supportsAriaLabel: true; readonly supportsAriaLabelledBy: true; }; }

Native input semantics wrapped by askr-ui Input.

InputA11yContracttype

InputA11yContract: typeof INPUT_A11Y_CONTRACT

Type of the Input A11y Contract object.

InputAsChildPropstype

InputAsChildProps: InputOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

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

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<Element>;
tabIndex
tabIndex?: number | undefined;

InputEventtype

InputEvent: Event & {
  currentTarget: HTMLInputElement;
  target: HTMLInputElement;
}

Input Event.

InputInputPropstype

InputInputProps: Omit<JSX.IntrinsicElements['input'], 'children' | 'ref'> & InputOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLInputElement>;
}

Props for Input Input.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLInputElement>;

InputOwnPropstype

InputOwnProps: {
  children?: unknown;
  disabled?: boolean;
  tabIndex?: number;
}

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

children
children?: unknown;
disabled
disabled?: boolean | undefined;
tabIndex
tabIndex?: number | undefined;

InputPropstype

InputProps: InputInputProps | InputAsChildProps

Props for Input.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | null | undefined;

Labeltype

Label: { (props: LabelLabelProps): JSXElement; (props: LabelAsChildProps): JSXElement; }

Renders the `label` part of `label`. Supports polymorphic rendering via `asChild`.

LABEL_A11Y_CONTRACTtype

LABEL_A11Y_CONTRACT: { readonly ELEMENT: "label"; readonly ASSOCIATION_ATTRIBUTE: "for"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; }; readonly NAME_SOURCE_PRIORITY: readonly ["aria-label", "textContent"]; readonly AS_CHILD: { readonly forwardsProps: true; readonly preservesChildElement: true; }; }

Native label semantics for askr-ui Label.

LabelA11yContracttype

LabelA11yContract: typeof LABEL_A11Y_CONTRACT

Type of the Label A11y Contract object.

LabelAsChildPropstype

LabelAsChildProps: LabelOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

LabelLabelPropstype

LabelLabelProps: Omit<Props, 'children'> & LabelOwnProps & {
  asChild?: false;
  htmlFor?: string;
  ref?: Ref<HTMLLabelElement>;
}

Props for Label Label.

asChild
asChild?: false | undefined;
children
children?: unknown;
htmlFor
htmlFor?: string | undefined;
ref
ref?: Ref<HTMLLabelElement>;

LabelOwnPropstype

LabelOwnProps: {
  children?: unknown;
}

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

children
children?: unknown;

LabelPropstype

LabelProps: LabelLabelProps | LabelAsChildProps

Props for Label.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLLabelElement | null) => void) | { current: HTMLLabelElement | null; } | null | undefined;

MenubarContenttype

MenubarContent: { (props: MenubarContentProps): JSX.Element | null; (props: MenubarContentAsChildProps): JSX.Element | null; }

Renders a part of `menubar`.

MenubarContentAsChildPropstype

MenubarContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps

Props for the `asChild` (polymorphic) rendering of Menubar Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

MenubarContentOwnPropstype

MenubarContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}

Own props for Menubar Content, before merging with native element attributes.

align
align?: OverlayAlign | undefined;
forceMount
forceMount?: boolean | undefined;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

MenubarContentPropstype

MenubarContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps

Props for Menubar Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

MenubarSubContenttype

MenubarSubContent: { (props: MenubarSubContentProps): JSX.Element | null; (props: MenubarSubContentAsChildProps): JSX.Element | null; }

Renders a part of `menubar`.

MenubarSubContentAsChildPropstype

MenubarSubContentAsChildProps: BoxAsChildProps & MenubarContentOwnProps

Props for the `asChild` (polymorphic) rendering of Menubar Sub Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

MenubarSubContentPropstype

MenubarSubContentProps: BoxProps<'div', HTMLDivElement> & MenubarContentOwnProps

Props for Menubar Sub Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

MenuContenttype

MenuContent: { (props: MenuContentProps): JSX.Element; (props: MenuContentAsChildProps): JSX.Element; }

Renders the `menu-content` part of `menu` with `role="menu"`. Supports polymorphic rendering via `asChild`.

MenuContentAsChildPropstype

MenuContentAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Menu Content.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

MenuContentPropstype

MenuContentProps: BoxProps<'div', HTMLDivElement>

Props for Menu Content.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

Popovertype

Popover: (props: PopoverProps) => JSX.Element

Renders a part of `popover`.

POPOVER_A11Y_CONTRACTtype

POPOVER_A11Y_CONTRACT: { readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly popup: "aria-haspopup"; readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; }; readonly CONTENT_ATTRIBUTES: { readonly role: "dialog"; readonly labelledBy: "aria-labelledby"; readonly tabIndex: -1; }; readonly DEFAULT_LABELING: { readonly source: "trigger-id"; readonly override: "aria-label or aria-labelledby"; }; readonly FOCUS_RULES: { readonly trapScope: true; readonly restoreFocusOnClose: true; readonly dismissableLayer: true; }; }

WAI-ARIA dialog-style popover contract.

PopoverA11yContracttype

PopoverA11yContract: typeof POPOVER_A11Y_CONTRACT

Type of the Popover A11y Contract object.

PopoverClosetype

PopoverClose: { (props: PopoverCloseProps): JSX.Element; (props: PopoverCloseAsChildProps): JSX.Element; }

Renders the `popover-close` part of `popover`. Supports polymorphic rendering via `asChild`.

PopoverCloseAsChildPropstype

PopoverCloseAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Popover Close.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

PopoverClosePropstype

PopoverCloseProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Popover Close.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

PopoverContenttype

PopoverContent: { (props: PopoverContentProps): JSX.Element | null; (props: PopoverContentAsChildProps): JSX.Element | null; }

Renders the `popover-content` part of `popover` with `role="dialog"`. Supports polymorphic rendering via `asChild`.

PopoverContentAsChildPropstype

PopoverContentAsChildProps: BoxAsChildProps & PopoverContentOwnProps

Props for the `asChild` (polymorphic) rendering of Popover Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;
width
width?: PopoverContentWidth | undefined;

PopoverContentOwnPropstype

PopoverContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
  width?: PopoverContentWidth;
}

Own props for Popover Content, before merging with native element attributes.

align
align?: OverlayAlign | undefined;
forceMount
forceMount?: boolean | undefined;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;
width
width?: PopoverContentWidth | undefined;

PopoverContentPropstype

PopoverContentProps: BoxProps<'div', HTMLDivElement> & PopoverContentOwnProps

Props for Popover Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;
width
width?: PopoverContentWidth | undefined;

PopoverOwnPropstype

PopoverOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

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

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

PopoverPortaltype

PopoverPortal: (props: PopoverPortalProps) => JSX.Element | null

Renders a part of `popover`.

PopoverPortalPropstype

PopoverPortalProps: {
  children?: unknown;
}

Props for Popover Portal.

children
children?: unknown;

PopoverPropstype

PopoverProps: PopoverOwnProps

Props for Popover.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

PopoverTriggertype

PopoverTrigger: { (props: PopoverTriggerProps): JSX.Element; (props: PopoverTriggerAsChildProps): JSX.Element; }

Renders the `popover-trigger` part of `popover`. Supports polymorphic rendering via `asChild`.

PopoverTriggerAsChildPropstype

PopoverTriggerAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Popover Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

PopoverTriggerPropstype

PopoverTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Popover Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

PressEventtype

PressEvent: {
  preventDefault?: () => void;
  stopPropagation?: () => void;
  defaultPrevented?: boolean;
}

Press event passed to onPress handler Compatible with the pressable foundation's PressEvent type.

Progresstype

Progress: (props: ProgressProps) => JSX.Element

Renders the `progress` part of `progress` with `role="progressbar"`.

PROGRESS_A11Y_CONTRACTtype

PROGRESS_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-indicator"; readonly INDICATOR_PERCENTAGE_ATTRIBUTE: "data-percentage"; }

WAI-ARIA progressbar contract for linear progress.

PROGRESS_CIRCLE_A11Y_CONTRACTtype

PROGRESS_CIRCLE_A11Y_CONTRACT: { readonly ROLE: "progressbar"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly percentage: "data-percentage"; }; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly INDICATOR_MARKER: "data-progress-circle-indicator"; }

WAI-ARIA progressbar contract for circular progress.

ProgressA11yContracttype

ProgressA11yContract: typeof PROGRESS_A11Y_CONTRACT

Type of the Progress A11y Contract object.

ProgressCircletype

ProgressCircle: (props: ProgressCircleProps) => JSX.Element

Headless circular progress indicator root. Normalizes value/max, computes percentage, exposes `--ak-progress-percentage` as a dynamically injected CSS custom property, and provides progress state to `ProgressCircleIndicator` via context.

ProgressCircleA11yContracttype

ProgressCircleA11yContract: typeof PROGRESS_CIRCLE_A11Y_CONTRACT

Type of the Progress Circle A11y Contract object.

ProgressCircleIndicatortype

ProgressCircleIndicator: { (props: ProgressCircleIndicatorProps): JSX.Element; (props: ProgressCircleIndicatorAsChildProps): JSX.Element; }

Visual indicator for `ProgressCircle`, rendering the fill/arc element. Must be used within a `ProgressCircle`; reads progress state from context and exposes it as `data-state`/`data-value`/`data-max`/`data-percentage`.

ProgressCircleIndicatorAsChildPropstype

ProgressCircleIndicatorAsChildProps: BoxAsChildProps

Props for `ProgressCircleIndicator` rendered polymorphically via `asChild`.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ProgressCircleIndicatorPropstype

ProgressCircleIndicatorProps: BoxProps<'div', HTMLDivElement>

Props for `ProgressCircleIndicator` rendered as a native `div`.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ProgressCircleOwnPropstype

ProgressCircleOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}

Props specific to `ProgressCircle`, before merging with native `div` attributes.

children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
value
value?: number | null | undefined;

ProgressCirclePropstype

ProgressCircleProps: BoxProps<'div', HTMLDivElement> & ProgressCircleOwnProps

Props for `ProgressCircle`, combining native `div` attributes with `ProgressCircleOwnProps`.

asChild
asChild?: false | undefined;
children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
ref
ref?: Ref<HTMLDivElement>;
value
value?: number | null | undefined;

ProgressIndicatortype

ProgressIndicator: { (props: ProgressIndicatorProps): JSX.Element; (props: ProgressIndicatorAsChildProps): JSX.Element; }

Renders the `progress-indicator` part of `progress`. Supports polymorphic rendering via `asChild`.

ProgressIndicatorAsChildPropstype

ProgressIndicatorAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Progress Indicator.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ProgressIndicatorPropstype

ProgressIndicatorProps: BoxProps<'div', HTMLDivElement>

Props for Progress Indicator.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ProgressOwnPropstype

ProgressOwnProps: {
  children?: unknown;
  id?: string;
  value?: number | null;
  max?: number;
  getValueLabel?: (value: number | null, max: number) => string;
}

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

children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
value
value?: number | null | undefined;

ProgressPropstype

ProgressProps: BoxProps<'div', HTMLDivElement> & ProgressOwnProps

Props for Progress.

asChild
asChild?: false | undefined;
children
children?: unknown;
getValueLabel
getValueLabel?: ((value: number | null, max: number) => string) | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
ref
ref?: Ref<HTMLDivElement>;
value
value?: number | null | undefined;

RADIO_GROUP_A11Y_CONTRACTtype

RADIO_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "radiogroup"; readonly ITEM_ROLE: "radio"; readonly CHECKED_ATTRIBUTE: "aria-checked"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; readonly KEYBOARD_NAVIGATION: readonly ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]; readonly ROVING_FOCUS: { readonly activeItemTabIndex: 0; readonly inactiveItemTabIndex: -1; }; readonly FORM_INTEGRATION: { readonly hiddenInputType: "hidden"; }; }

WAI-ARIA Radio Group Pattern Specification: https://www.w3.org/WAI/ARIA/apg/patterns/radio/

RadioGrouptype

RadioGroup: (props: RadioGroupProps) => JSX.Element

Renders a part of `radio-group`.

RadioGroupA11yContracttype

RadioGroupA11yContract: typeof RADIO_GROUP_A11Y_CONTRACT

Type of the Radio Group A11y Contract object.

RadioGroupItemtype

RadioGroupItem: { (props: RadioGroupItemProps): JSX.Element; (props: RadioGroupItemAsChildProps): JSX.Element; }

Renders the `radio-group-item` part of `radio-group` with `role="radio"`. Supports polymorphic rendering via `asChild`.

RadioGroupItemAsChildPropstype

RadioGroupItemAsChildProps: RadioGroupItemOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

Props for the `asChild` (polymorphic) rendering of Radio Group Item.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<Element>;
value
value: string;

RadioGroupItemOwnPropstype

RadioGroupItemOwnProps: {
  value: string;
  disabled?: boolean;
  children?: unknown;
}

Own props for Radio Group Item, before merging with native element attributes.

children
children?: unknown;
disabled
disabled?: boolean | undefined;
value
value: string;

RadioGroupItemPropstype

RadioGroupItemProps: Omit<JSX.IntrinsicElements['button'], 'children' | 'ref' | 'onClick' | 'type' | 'value'> & RadioGroupItemOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLButtonElement>;
}

Props for Radio Group Item.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLButtonElement>;
value
value: string;

RadioGroupOwnPropstype

RadioGroupOwnProps: {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  disabled?: boolean;
  name?: string;
  orientation?: Orientation;
  loop?: boolean;
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
}

Own props for Radio Group, before merging with native element attributes.

children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: string | undefined;
disabled
disabled?: boolean | undefined;
loop
loop?: boolean | undefined;
name
name?: string | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
orientation
orientation?: Orientation | undefined;
value
value?: string | undefined;

RadioGroupPropstype

RadioGroupProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & RadioGroupOwnProps & {
  ref?: Ref<HTMLDivElement>;
}

Props for Radio Group.

children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: string | undefined;
disabled
disabled?: boolean | undefined;
loop
loop?: boolean | undefined;
name
name?: string | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
orientation
orientation?: Orientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
value
value?: string | undefined;

ScrollAreatype

ScrollArea: { (props: ScrollAreaProps): JSX.Element; (props: ScrollAreaAsChildProps): JSX.Element; }

Renders a part of `scroll-area`.

ScrollAreaAsChildPropstype

ScrollAreaAsChildProps: ScrollAreaOwnProps & {
  asChild: true;
  children: JSX.Element;
}

Props for the `asChild` (polymorphic) rendering of Scroll Area.

asChild
asChild: true;
children
children: JSX.Element;
id
id?: string | undefined;

ScrollAreaCornertype

ScrollAreaCorner: (props: ScrollAreaCornerProps) => JSX.Element

Renders the `scroll-area-corner` part of `scroll-area`.

ScrollAreaCornerPropstype

ScrollAreaCornerProps: BoxProps<'div', HTMLDivElement>

Props for Scroll Area Corner.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ScrollAreaOwnPropstype

ScrollAreaOwnProps: {
  children?: unknown;
  id?: string;
}

Own props for Scroll Area, before merging with native element attributes.

children
children?: unknown;
id
id?: string | undefined;

ScrollAreaPropstype

ScrollAreaProps: ScrollAreaOwnProps

Props for Scroll Area.

children
children?: unknown;
id
id?: string | undefined;

ScrollAreaScrollbartype

ScrollAreaScrollbar: (props: ScrollAreaScrollbarProps) => JSX.Element

Renders the `scroll-area-scrollbar` part of `scroll-area` with `role="scrollbar"`.

ScrollAreaScrollbarPropstype

ScrollAreaScrollbarProps: BoxProps<'div', HTMLDivElement> & {
  orientation?: 'vertical' | 'horizontal';
}

Props for Scroll Area Scrollbar.

asChild
asChild?: false | undefined;
children
children?: unknown;
orientation
orientation?: "vertical" | "horizontal" | undefined;
ref
ref?: Ref<HTMLDivElement>;

ScrollAreaThumbtype

ScrollAreaThumb: (props: ScrollAreaThumbProps) => JSX.Element

Renders the `scroll-area-thumb` part of `scroll-area`.

ScrollAreaThumbPropstype

ScrollAreaThumbProps: BoxProps<'div', HTMLDivElement>

Props for Scroll Area Thumb.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ScrollAreaViewporttype

ScrollAreaViewport: { (props: ScrollAreaViewportProps): JSX.Element; (props: ScrollAreaViewportAsChildProps): JSX.Element; }

Renders a part of `scroll-area`.

ScrollAreaViewportAsChildPropstype

ScrollAreaViewportAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Scroll Area Viewport.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ScrollAreaViewportPropstype

ScrollAreaViewportProps: BoxProps<'div', HTMLDivElement>

Props for Scroll Area Viewport.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

Selecttype

Select: (props: SelectProps) => JSX.Element

Renders a part of `select`.

SELECT_A11Y_CONTRACTtype

SELECT_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly CONTENT_ROLE: "listbox"; readonly ITEM_ROLE: "option"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTES: { readonly expanded: "aria-expanded"; readonly controls: "aria-controls"; readonly hasPopup: "aria-haspopup"; }; readonly ITEM_SELECTION_ATTRIBUTE: "aria-selected"; }

Select accessibility contract.

SelectA11yContracttype

SelectA11yContract: typeof SELECT_A11Y_CONTRACT

Type of the Select A11y Contract object.

SelectContenttype

SelectContent: { (props: SelectContentProps): JSX.Element | null; (props: SelectContentAsChildProps): JSX.Element | null; }

Renders a part of `select` with `role="listbox"`. Supports polymorphic rendering via `asChild`.

SelectContentAsChildPropstype

SelectContentAsChildProps: BoxAsChildProps & SelectContentOwnProps

Props for the `asChild` (polymorphic) rendering of Select Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

SelectContentOwnPropstype

SelectContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}

Own props for Select Content, before merging with native element attributes.

align
align?: OverlayAlign | undefined;
forceMount
forceMount?: boolean | undefined;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

SelectContentPropstype

SelectContentProps: BoxProps<'div', HTMLDivElement> & SelectContentOwnProps

Props for Select Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

SelectGrouptype

SelectGroup: { (props: SelectGroupProps): JSX.Element; (props: SelectGroupAsChildProps): JSX.Element; }

Renders the `select-group` part of `select` with `role="group"`. Supports polymorphic rendering via `asChild`.

SelectGroupAsChildPropstype

SelectGroupAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Select Group.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectGroupPropstype

SelectGroupProps: BoxProps<'div', HTMLDivElement>

Props for Select Group.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectItemtype

SelectItem: { (props: SelectItemProps): JSX.Element | null; (props: SelectItemAsChildProps): JSX.Element | null; }

Renders a part of `select`. Supports polymorphic rendering via `asChild`.

SelectItemAsChildPropstype

SelectItemAsChildProps: Omit<ButtonLikeAsChildProps, 'onPress'> & SelectItemOwnProps

Props for the `asChild` (polymorphic) rendering of Select Item.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<Element>;
textValue
textValue?: string | undefined;
type
type?: undefined;
value
value: string;

SelectItemOwnPropstype

SelectItemOwnProps: {
  children?: unknown;
  disabled?: boolean;
  textValue?: string;
  value: string;
}

Own props for Select Item, before merging with native element attributes.

children
children?: unknown;
disabled
disabled?: boolean | undefined;
textValue
textValue?: string | undefined;
value
value: string;

SelectItemPropstype

SelectItemProps: Omit<ButtonLikeProps<'button', HTMLButtonElement>, 'onPress'> & SelectItemOwnProps

Props for Select Item.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<HTMLButtonElement>;
textValue
textValue?: string | undefined;
type
type?: "button" | "submit" | "reset" | undefined;

SelectItemTexttype

SelectItemText: { (props: SelectItemTextProps): JSX.Element; (props: SelectItemTextAsChildProps): JSX.Element; }

SelectItemText marks the item text node so Select can resolve labels and style the text slot directly. Renders the `select-item-text` part of `select`. Supports polymorphic rendering via `asChild`.

SelectItemTextAsChildPropstype

SelectItemTextAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Select Item Text.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectItemTextPropstype

SelectItemTextProps: BoxProps<'span', HTMLSpanElement>

Props for Select Item Text.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLSpanElement>;

SelectLabeltype

SelectLabel: { (props: SelectLabelProps): JSX.Element | null; (props: SelectLabelAsChildProps): JSX.Element | null; }

Renders the `select-label` part of `select`. Supports polymorphic rendering via `asChild`.

SelectLabelAsChildPropstype

SelectLabelAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Select Label.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectLabelPropstype

SelectLabelProps: BoxProps<'div', HTMLDivElement>

Props for Select Label.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectOwnPropstype

SelectOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  name?: string;
  disabled?: boolean;
}

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

children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultOpen
defaultOpen?: boolean | undefined;
defaultValue
defaultValue?: string | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
name
name?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
open
open?: boolean | undefined;
value
value?: string | undefined;

SelectPortaltype

SelectPortal: (props: SelectPortalProps) => JSX.Element | null

Renders a part of `select`.

SelectPortalPropstype

SelectPortalProps: {
  children?: unknown;
}

Props for Select Portal.

children
children?: unknown;

SelectPropstype

SelectProps: SelectOwnProps

Props for Select.

children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultOpen
defaultOpen?: boolean | undefined;
defaultValue
defaultValue?: string | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
name
name?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
open
open?: boolean | undefined;
value
value?: string | undefined;

SelectSeparatortype

SelectSeparator: { (props: SelectSeparatorProps): JSX.Element | null; (props: SelectSeparatorAsChildProps): JSX.Element | null; }

Renders the `select-separator` part of `select` with `role="separator"`. Supports polymorphic rendering via `asChild`.

SelectSeparatorAsChildPropstype

SelectSeparatorAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Select Separator.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SelectSeparatorPropstype

SelectSeparatorProps: BoxProps<'div', HTMLDivElement>

Props for Select Separator.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SelectTriggertype

SelectTrigger: { (props: SelectTriggerProps): JSX.Element | null; (props: SelectTriggerAsChildProps): JSX.Element | null; }

Renders the `select-trigger` part of `select`. Supports polymorphic rendering via `asChild`.

SelectTriggerAsChildPropstype

SelectTriggerAsChildProps: ButtonLikeAsChildProps & SelectTriggerOwnProps

Props for the `asChild` (polymorphic) rendering of Select Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
size
size?: SelectTriggerSize | undefined;
type
type?: undefined;

SelectTriggerOwnPropstype

SelectTriggerOwnProps: {
  size?: SelectTriggerSize;
}

Own props for Select Trigger, before merging with native element attributes.

size
size?: SelectTriggerSize | undefined;

SelectTriggerPropstype

SelectTriggerProps: ButtonLikeProps<'button', HTMLButtonElement> & SelectTriggerOwnProps

Props for Select Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
size
size?: SelectTriggerSize | undefined;
type
type?: "button" | "submit" | "reset" | undefined;

SelectValuetype

SelectValue: { (props: SelectValueProps): JSX.Element | null; (props: SelectValueAsChildProps): JSX.Element | null; }

Renders the `select-value` part of `select`. Supports polymorphic rendering via `asChild`.

SelectValueAsChildPropstype

SelectValueAsChildProps: BoxAsChildProps & SelectValueOwnProps

Props for the `asChild` (polymorphic) rendering of Select Value.

asChild
asChild: true;
children
children: JSXElement;
placeholder
placeholder?: string | undefined;
ref
ref?: Ref<Element>;

SelectValueOwnPropstype

SelectValueOwnProps: {
  placeholder?: string;
  children?: unknown;
}

Own props for Select Value, before merging with native element attributes.

children
children?: unknown;
placeholder
placeholder?: string | undefined;

SelectValuePropstype

SelectValueProps: BoxProps<'span', HTMLSpanElement> & SelectValueOwnProps

Props for Select Value.

asChild
asChild?: false | undefined;
children
children?: unknown;
placeholder
placeholder?: string | undefined;
ref
ref?: Ref<HTMLSpanElement>;

Slidertype

Slider: (props: SliderProps) => JSX.Element

Renders the `slider` part of `slider`.

SLIDER_A11Y_CONTRACTtype

SLIDER_A11Y_CONTRACT: { readonly THUMB_ROLE: "slider"; readonly VALUE_NOW_ATTRIBUTE: "aria-valuenow"; readonly VALUE_MIN_ATTRIBUTE: "aria-valuemin"; readonly VALUE_MAX_ATTRIBUTE: "aria-valuemax"; readonly ORIENTATION_ATTRIBUTE: "aria-orientation"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }

Slider accessibility contract.

SliderA11yContracttype

SliderA11yContract: typeof SLIDER_A11Y_CONTRACT

Type of the Slider A11y Contract object.

SliderOwnPropstype

SliderOwnProps: {
  /** Supports literal, nested, array-mapped, and `For`-rendered descendants. */
  children?: unknown;
  id?: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  orientation?: SliderOrientation;
  disabled?: boolean;
  name?: string;
}

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

children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: number | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
min
min?: number | undefined;
name
name?: string | undefined;
onValueChange
onValueChange?: ((value: number) => void) | undefined;
orientation
orientation?: SliderOrientation | undefined;
step
step?: number | undefined;
value
value?: number | undefined;

SliderPropstype

SliderProps: BoxProps<'div', HTMLDivElement> & SliderOwnProps

Props for Slider.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: number | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
max
max?: number | undefined;
min
min?: number | undefined;
name
name?: string | undefined;
onValueChange
onValueChange?: ((value: number) => void) | undefined;
orientation
orientation?: SliderOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
step
step?: number | undefined;
value
value?: number | undefined;

SliderRangetype

SliderRange: { (props: SliderRangeProps): JSX.Element; (props: SliderRangeAsChildProps): JSX.Element; }

Renders the `slider-range` part of `slider`. Supports polymorphic rendering via `asChild`.

SliderRangeAsChildPropstype

SliderRangeAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Slider Range.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SliderRangePropstype

SliderRangeProps: BoxProps<'div', HTMLDivElement>

Props for Slider Range.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SliderThumbtype

SliderThumb: { (props: SliderThumbProps): JSX.Element; (props: SliderThumbAsChildProps): JSX.Element; }

Renders the `slider-thumb` part of `slider` with `role="slider"`. Supports polymorphic rendering via `asChild`.

SliderThumbAsChildPropstype

SliderThumbAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Slider Thumb.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SliderThumbPropstype

SliderThumbProps: BoxProps<'div', HTMLDivElement>

Props for Slider Thumb.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

SliderTracktype

SliderTrack: { (props: SliderTrackProps): JSX.Element; (props: SliderTrackAsChildProps): JSX.Element; }

Renders the `slider-track` part of `slider`. Supports polymorphic rendering via `asChild`.

SliderTrackAsChildPropstype

SliderTrackAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Slider Track.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

SliderTrackPropstype

SliderTrackProps: BoxProps<'div', HTMLDivElement>

Props for Slider Track.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

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;

Tabletype

Table: { (props: TableProps): JSX.Element; (props: TableAsChildProps): JSX.Element; }

Semantic table primitive family. Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableAsChildPropstype

TableAsChildProps: TableAsChildBaseProps

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

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableBodytype

TableBody: { (props: TableBodyProps): JSX.Element; (props: TableBodyAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableBodyAsChildPropstype

TableBodyAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Body.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableBodyPropstype

TableBodyProps: TableNativeProps<'tbody', HTMLTableSectionElement> | TableBodyAsChildProps

Props for Table Body.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

TableCaptiontype

TableCaption: { (props: TableCaptionProps): JSX.Element; (props: TableCaptionAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableCaptionAsChildPropstype

TableCaptionAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Caption.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableCaptionPropstype

TableCaptionProps: TableNativeProps<'caption', HTMLTableCaptionElement> | TableCaptionAsChildProps

Props for Table Caption.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCaptionElement | null) => void) | { current: HTMLTableCaptionElement | null; } | null | undefined;

TableCelltype

TableCell: { (props: TableCellProps): JSX.Element; (props: TableCellAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableCellAsChildPropstype

TableCellAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Cell.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableCellPropstype

TableCellProps: TableNativeProps<'td', HTMLTableCellElement> | TableCellAsChildProps

Props for Table Cell.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCellElement | null) => void) | { current: HTMLTableCellElement | null; } | null | undefined;

TableFoottype

TableFoot: { (props: TableFootProps): JSX.Element; (props: TableFootAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableFootAsChildPropstype

TableFootAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Foot.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableFootPropstype

TableFootProps: TableNativeProps<'tfoot', HTMLTableSectionElement> | TableFootAsChildProps

Props for Table Foot.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

TableHeadtype

TableHead: { (props: TableHeadProps): JSX.Element; (props: TableHeadAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableHeadAsChildPropstype

TableHeadAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Head.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableHeaderCelltype

TableHeaderCell: { (props: TableHeaderCellProps): JSX.Element; (props: TableHeaderCellAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableHeaderCellAsChildPropstype

TableHeaderCellAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Header Cell.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableHeaderCellPropstype

TableHeaderCellProps: TableNativeProps<'th', HTMLTableCellElement> | TableHeaderCellAsChildProps

Props for Table Header Cell.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableCellElement | null) => void) | { current: HTMLTableCellElement | null; } | null | undefined;

TableHeadPropstype

TableHeadProps: TableNativeProps<'thead', HTMLTableSectionElement> | TableHeadAsChildProps

Props for Table Head.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableSectionElement | null) => void) | { current: HTMLTableSectionElement | null; } | null | undefined;

TablePropstype

TableProps: TableNativeProps<'table', HTMLTableElement> | TableAsChildBaseProps

Props for Table.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableElement | null) => void) | { current: HTMLTableElement | null; } | null | undefined;

TableRowtype

TableRow: { (props: TableRowProps): JSX.Element; (props: TableRowAsChildProps): JSX.Element; }

Renders a part of `table`. Supports polymorphic rendering via `asChild`.

TableRowAsChildPropstype

TableRowAsChildProps: TableAsChildBaseProps

Props for the `asChild` (polymorphic) rendering of Table Row.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

TableRowPropstype

TableRowProps: TableNativeProps<'tr', HTMLTableRowElement> | TableRowAsChildProps

Props for Table Row.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTableRowElement | null) => void) | { current: HTMLTableRowElement | null; } | null | undefined;

Textareatype

Textarea: { (props: TextareaElementProps): JSX.Element; (props: TextareaAsChildProps): JSX.Element; }

Renders the `textarea` part of `textarea`. Supports polymorphic rendering via `asChild`.

TEXTAREA_A11Y_CONTRACTtype

TEXTAREA_A11Y_CONTRACT: { readonly HOST_ELEMENT: "textarea"; readonly DISABLED_ATTRIBUTES: { readonly native: "disabled"; readonly asChild: "disabled"; }; readonly DATA_ATTRIBUTES: { readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly defaultTabIndex: 0; readonly disabledTabIndex: -1; }; readonly LABELING: { readonly supportsLabelElement: true; readonly supportsAriaLabel: true; readonly supportsAriaLabelledBy: true; }; }

Native textarea semantics wrapped by askr-ui Textarea.

TextareaA11yContracttype

TextareaA11yContract: typeof TEXTAREA_A11Y_CONTRACT

Type of the Textarea A11y Contract object.

TextareaAsChildPropstype

TextareaAsChildProps: TextareaOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

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

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
ref
ref?: Ref<Element>;
tabIndex
tabIndex?: number | undefined;

TextareaElementPropstype

TextareaElementProps: Omit<JSX.IntrinsicElements['textarea'], 'children' | 'ref'> & TextareaOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLTextAreaElement>;
}

Props for Textarea Element.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLTextAreaElement>;

TextareaOwnPropstype

TextareaOwnProps: {
  children?: unknown;
  disabled?: boolean;
  tabIndex?: number;
}

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

children
children?: unknown;
disabled
disabled?: boolean | undefined;
tabIndex
tabIndex?: number | undefined;

TextareaPropstype

TextareaProps: TextareaElementProps | TextareaAsChildProps

Props for Textarea.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLTextAreaElement | null) => void) | { current: HTMLTextAreaElement | null; } | null | undefined;

Toasttype

Toast: (props: ToastProps) => JSX.Element | null

Toast registers a notification entry with the host and returns no DOM on its own.

TOAST_A11Y_CONTRACTtype

TOAST_A11Y_CONTRACT: { readonly ROOT_ROLE: "status"; readonly LIVE_REGION_ATTRIBUTE: "aria-live"; readonly LIVE_REGION_VALUE: "polite"; readonly VIEWPORT_LABEL: "Notifications"; readonly AUTO_DISMISS_PAUSE: "pointer-or-focus"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; }

Toast accessibility contract.

ToastA11yContracttype

ToastA11yContract: typeof TOAST_A11Y_CONTRACT

Type of the Toast A11y Contract object.

ToastActiontype

ToastAction: { (props: ToastActionProps): JSX.Element; (props: ToastActionAsChildProps): JSX.Element; }

ToastAction closes the toast after handling a user-triggered action. Renders the `toast-action` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastActionAsChildPropstype

ToastActionAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Action.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

ToastActionPropstype

ToastActionProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Toast Action.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

ToastClosetype

ToastClose: { (props: ToastCloseProps): JSX.Element; (props: ToastCloseAsChildProps): JSX.Element; }

ToastClose is the dedicated dismiss control for a toast entry. Renders the `toast-close` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastCloseAsChildPropstype

ToastCloseAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Close.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

ToastClosePropstype

ToastCloseProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Toast Close.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

ToastDescriptiontype

ToastDescription: { (props: ToastDescriptionProps): JSX.Element; (props: ToastDescriptionAsChildProps): JSX.Element; }

ToastDescription marks the accessible description slot for a toast entry. Renders the `toast-description` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastDescriptionAsChildPropstype

ToastDescriptionAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Description.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ToastDescriptionPropstype

ToastDescriptionProps: BoxProps<'div', HTMLDivElement>

Props for Toast Description.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ToastHosttype

ToastHost: (props: ToastHostProps) => JSX.Element

ToastHost owns the registry of active toast entries and the default display duration for the family.

ToastHostOwnPropstype

ToastHostOwnProps: {
  children?: unknown;
  id?: string;
  duration?: number;
}

Props for the host that owns toast timing defaults and the registry.

children
children?: unknown;
duration
duration?: number | undefined;
id
id?: string | undefined;

ToastHostPropstype

ToastHostProps: BoxProps<'div', HTMLDivElement> & ToastHostOwnProps

Props for Toast Host.

asChild
asChild?: false | undefined;
children
children?: unknown;
duration
duration?: number | undefined;
id
id?: string | undefined;
ref
ref?: Ref<HTMLDivElement>;

ToastOwnPropstype

ToastOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  duration?: number;
  variant?: ToastVariant;
}

Props for a toast registration entry declared through Toast.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
duration
duration?: number | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;
variant
variant?: ToastVariant | undefined;

ToastPropstype

ToastProps: BoxProps<'div', HTMLDivElement> & ToastOwnProps

Props for Toast.

asChild
asChild?: false | undefined;
children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
duration
duration?: number | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
variant
variant?: ToastVariant | undefined;

ToastTitletype

ToastTitle: { (props: ToastTitleProps): JSX.Element; (props: ToastTitleAsChildProps): JSX.Element; }

ToastTitle marks the accessible title slot for a toast entry. Renders the `toast-title` part of `toast`. Supports polymorphic rendering via `asChild`.

ToastTitleAsChildPropstype

ToastTitleAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Title.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ToastTitlePropstype

ToastTitleProps: BoxProps<'div', HTMLDivElement>

Props for Toast Title.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

ToastViewporttype

ToastViewport: { (props: ToastViewportProps): JSX.Element; (props: ToastViewportAsChildProps): JSX.Element; }

ToastViewport renders the live toast stack and the notification region. Renders the `toast-viewport` part of `toast` with `role="region"`. Supports polymorphic rendering via `asChild`.

ToastViewportAsChildPropstype

ToastViewportAsChildProps: BoxAsChildProps

Props for the `asChild` (polymorphic) rendering of Toast Viewport.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

ToastViewportPropstype

ToastViewportProps: BoxProps<'div', HTMLDivElement>

Props for Toast Viewport.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLDivElement>;

Toggletype

Toggle: { (props: ToggleButtonProps): JSX.Element; (props: ToggleAsChildProps): JSX.Element; }

Headless Toggle component ## Responsibilities - Compose pressable foundation for interaction behavior - Apply aria-pressed for toggle state signaling - Enforce type="button" default to prevent accidental form submission - Forward props and refs to native button or child element ## Non-Responsibilities (delegated to pressable foundation) - Keyboard event handling (Enter/Space) - Pointer event handling - Disabled state enforcement - Role attribute application (for non-native elements) ## Invariants - MUST NOT contain any event handler logic - MUST NOT check disabled or pressed props directly - MUST use pressable() for ALL interaction behavior - MUST use mergeProps() for ALL prop composition - pressed state is CONTROLLED (consumer manages state) Renders the `toggle` part of `toggle`. Supports polymorphic rendering via `asChild`.

Native toggle button
```tsx
const pressed = state(false);
<Toggle pressed={pressed()} onPress={() => pressed.set(!pressed())}>
Mute
</Toggle>
```
Polymorphic rendering (asChild)
```tsx
<Toggle asChild pressed={muted} onPress={toggleMute}>
<span>🔇</span>
</Toggle>
```

TOGGLE_A11Y_CONTRACTtype

TOGGLE_A11Y_CONTRACT: { readonly ROLE: "button"; readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly PRESSED_ATTRIBUTE: "aria-pressed"; readonly DISABLED_ATTRIBUTES: { readonly nativeButton: { readonly disabled: true; readonly "aria-disabled": "true"; }; readonly nonNative: { readonly "aria-disabled": "true"; readonly tabIndex: -1; }; }; readonly DATA_ATTRIBUTES: { readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly FOCUS_RULES: { readonly enabled: "tabIndex >= 0"; readonly disabled: "tabIndex = -1"; readonly visualIndicator: "required"; }; }

WAI-ARIA Toggle Button Pattern Specification: https://www.w3.org/WAI/ARIA/apg/patterns/button/ A toggle button is a two-state button that can be either on or off. Uses aria-pressed to communicate toggle state to assistive technology. ## Required ARIA - aria-pressed: 'true' | 'false' (indicates toggle state) - role: 'button' (when not native button) ## Keyboard Support - Enter: Activates toggle (on native button and non-button elements) - Space: Activates toggle ## Focus Management - Toggle is focusable when not disabled - Visual focus indicator required ## Disabled State - aria-disabled when disabled=true - Removed from tab order - Visual disabled styling (consumer responsibility)

TOGGLE_GROUP_A11Y_CONTRACTtype

TOGGLE_GROUP_A11Y_CONTRACT: { readonly GROUP_ROLE: "group"; readonly ITEM_ROLE: "button"; readonly PRESSED_ATTRIBUTE: "aria-pressed"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly orientation: "data-orientation"; }; }

Accessibility contract for toggle groups.

ToggleA11yContracttype

ToggleA11yContract: typeof TOGGLE_A11Y_CONTRACT

Type of the Toggle A11y Contract object.

ToggleAsChildPropstype

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

Props when rendering via asChild

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
pressed
pressed?: boolean | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

ToggleButtonPropstype

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

Props when rendering as a native <button> element

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
pressed
pressed?: boolean | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

ToggleGrouptype

ToggleGroup: (props: ToggleGroupProps) => JSX.Element

Renders a part of `toggle-group`.

ToggleGroupA11yContracttype

ToggleGroupA11yContract: typeof TOGGLE_GROUP_A11Y_CONTRACT

Type of the Toggle Group A11y Contract object.

ToggleGroupItemtype

ToggleGroupItem: { (props: ToggleGroupItemProps): JSX.Element; (props: ToggleGroupItemAsChildProps): JSX.Element; }

Renders a part of `toggle-group`. Supports polymorphic rendering via `asChild`.

ToggleGroupItemAsChildPropstype

ToggleGroupItemAsChildProps: ButtonLikeAsChildProps & ToggleGroupItemOwnProps

Props for the `asChild` (polymorphic) rendering of Toggle Group Item.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;
value
value: string;

ToggleGroupItemOwnPropstype

ToggleGroupItemOwnProps: {
  value: string;
  disabled?: boolean;
  children?: unknown;
}

Own props for Toggle Group Item, before merging with native element attributes.

children
children?: unknown;
disabled
disabled?: boolean | undefined;
value
value: string;

ToggleGroupItemPropstype

ToggleGroupItemProps: ButtonLikeProps<'button', HTMLButtonElement> & ToggleGroupItemOwnProps

Props for Toggle Group Item.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

ToggleGroupMultiplePropstype

ToggleGroupMultipleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type: 'multiple';
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
}

Props for Toggle Group Multiple.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: string[] | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string[]) => void) | undefined;
orientation
orientation?: ToggleGroupOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type: "multiple";
value
value?: string[] | undefined;

ToggleGroupPropstype

ToggleGroupProps: ToggleGroupSingleProps | ToggleGroupMultipleProps

Props for Toggle Group.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: string | string[] | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string[]) => void) | ((value: string) => void) | undefined;
orientation
orientation?: ToggleGroupOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type?: "single" | "multiple" | undefined;
value
value?: string | string[] | undefined;

ToggleGroupSinglePropstype

ToggleGroupSingleProps: BoxProps<'div', HTMLDivElement> & ToggleGroupSharedOwnProps & {
  type?: 'single';
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
}

Props for Toggle Group Single.

asChild
asChild?: false | undefined;
children
Supports literal, nested, array-mapped, and `For`-rendered descendants.
defaultValue
defaultValue?: string | undefined;
disabled
disabled?: boolean | undefined;
id
id?: string | undefined;
loop
loop?: boolean | undefined;
onValueChange
onValueChange?: ((value: string) => void) | undefined;
orientation
orientation?: ToggleGroupOrientation | undefined;
ref
ref?: Ref<HTMLDivElement>;
type
type?: "single" | undefined;
value
value?: string | undefined;

ToggleOwnPropstype

ToggleOwnProps: {
  children?: unknown;
  onPress?: (e: PressEvent) => void;
  pressed?: boolean;
  disabled?: boolean;
}

Props shared by all Toggle variants

children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
pressed
pressed?: boolean | undefined;

TogglePropstype

ToggleProps: ToggleButtonProps | ToggleAsChildProps

Discriminated union of Toggle prop types

asChild
asChild?: boolean | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((e: PressEvent) => void) | undefined;
pressed
pressed?: boolean | undefined;
ref
ref?: ((value: Element | null) => void) | { current: Element | null; } | ((value: HTMLButtonElement | null) => void) | { current: HTMLButtonElement | null; } | null | undefined;
type
type?: "button" | "submit" | "reset" | undefined;

Tooltiptype

Tooltip: (props: TooltipProps) => JSX.Element

Renders a part of `tooltip`.

TOOLTIP_A11Y_CONTRACTtype

TOOLTIP_A11Y_CONTRACT: { readonly CONTENT_ROLE: "tooltip"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; readonly side: "data-side"; readonly align: "data-align"; }; readonly TRIGGER_ATTRIBUTE: "aria-describedby"; readonly OPEN_STATE_ATTRIBUTE: "data-state"; }

Tooltip accessibility contract.

TooltipA11yContracttype

TooltipA11yContract: typeof TOOLTIP_A11Y_CONTRACT

Type of the Tooltip A11y Contract object.

TooltipContenttype

TooltipContent: { (props: TooltipContentProps): JSX.Element | null; (props: TooltipContentAsChildProps): JSX.Element | null; }

Renders the `tooltip-content` part of `tooltip` with `role="tooltip"`. Supports polymorphic rendering via `asChild`.

TooltipContentAsChildPropstype

TooltipContentAsChildProps: BoxAsChildProps & TooltipContentOwnProps

Props for the `asChild` (polymorphic) rendering of Tooltip Content.

align
align?: OverlayAlign | undefined;
asChild
asChild: true;
children
children: JSXElement;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<Element>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

TooltipContentOwnPropstype

TooltipContentOwnProps: {
  forceMount?: boolean;
  side?: OverlaySide;
  align?: OverlayAlign;
  sideOffset?: number;
}

Own props for Tooltip Content, before merging with native element attributes.

align
align?: OverlayAlign | undefined;
forceMount
forceMount?: boolean | undefined;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

TooltipContentPropstype

TooltipContentProps: BoxProps<'div', HTMLDivElement> & TooltipContentOwnProps

Props for Tooltip Content.

align
align?: OverlayAlign | undefined;
asChild
asChild?: false | undefined;
children
children?: unknown;
forceMount
forceMount?: boolean | undefined;
ref
ref?: Ref<HTMLDivElement>;
side
side?: OverlaySide | undefined;
sideOffset
sideOffset?: number | undefined;

TooltipOwnPropstype

TooltipOwnProps: {
  children?: unknown;
  id?: string;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
}

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

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

TooltipPortaltype

TooltipPortal: (props: TooltipPortalProps) => JSX.Element | null

Renders a part of `tooltip`.

TooltipPortalPropstype

TooltipPortalProps: {
  children?: unknown;
}

Props for Tooltip Portal.

children
children?: unknown;

TooltipPropstype

TooltipProps: TooltipOwnProps

Props for Tooltip.

children
children?: unknown;
defaultOpen
defaultOpen?: boolean | undefined;
id
id?: string | undefined;
onOpenChange
onOpenChange?: ((open: boolean) => void) | undefined;
open
open?: boolean | undefined;

TooltipTriggertype

TooltipTrigger: { (props: TooltipTriggerProps): JSX.Element; (props: TooltipTriggerAsChildProps): JSX.Element; }

Renders the `tooltip-trigger` part of `tooltip`. Supports polymorphic rendering via `asChild`.

TooltipTriggerAsChildPropstype

TooltipTriggerAsChildProps: ButtonLikeAsChildProps

Props for the `asChild` (polymorphic) rendering of Tooltip Trigger.

asChild
asChild: true;
children
children: JSXElement;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<Element>;
type
type?: undefined;

TooltipTriggerPropstype

TooltipTriggerProps: ButtonLikeProps<'button', HTMLButtonElement>

Props for Tooltip Trigger.

asChild
asChild?: false | undefined;
children
children?: unknown;
disabled
disabled?: boolean | undefined;
onPress
onPress?: ((event: PressEvent) => void) | undefined;
ref
ref?: Ref<HTMLButtonElement>;
type
type?: "button" | "submit" | "reset" | undefined;

VirtualListtype

VirtualList: { <Item>(props: VirtualListProps<Item>): JSX.Element; <Item>(props: VirtualListAsChildProps<Item>): JSX.Element; }

Renders a part of `virtual-list`. Supports polymorphic rendering via `asChild`.

VirtualListApitype

VirtualListApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualListState;
  getVisibleRange: () => VirtualRange;
  getItemCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  isFollowingBottom: () => boolean;
  getPendingUnseenCount: () => number;
  setFollowBottom: (followBottom: boolean) => void;
}

Virtual List Api.

VirtualListAsChildPropstype

VirtualListAsChildProps: Omit<VirtualListRootProps, 'children'> & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}

Props for the `asChild` (polymorphic) rendering of Virtual List.

apiRef
apiRef?: Ref<VirtualListApi<Item> | null>;
asChild
asChild: true;
children
children: JSXElement;
followBottom
followBottom?: boolean | { threshold?: number; } | undefined;
getKey
getKey: (item: Item, index: number) => string | number;
items
items: readonly Item[];
onScroll
onScroll?: ((event: Event) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowComponent
rowComponent: VirtualListRowComponent<Item>;
rowHeight
rowHeight: number;
viewport
viewport?: "lg" | undefined;

VirtualListPropstype

VirtualListProps: VirtualListRootProps & {
  items: readonly Item[];
  rowHeight: number;
  overscan?: VirtualOverscan;
  getKey: (item: Item, index: number) => string | number;
  rowComponent: VirtualListRowComponent<Item>;
  followBottom?: boolean | {
    threshold?: number;
  };
  onScroll?: (event: Event) => void;
  viewport?: VirtualListViewport;
  apiRef?: Ref<VirtualListApi<Item> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}

Props for Virtual List.

apiRef
apiRef?: Ref<VirtualListApi<Item> | null>;
asChild
asChild?: false | undefined;
followBottom
followBottom?: boolean | { threshold?: number; } | undefined;
getKey
getKey: (item: Item, index: number) => string | number;
items
items: readonly Item[];
onScroll
onScroll?: ((event: Event) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowComponent
rowComponent: VirtualListRowComponent<Item>;
rowHeight
rowHeight: number;
viewport
viewport?: "lg" | undefined;

VirtualListRowComponenttype

VirtualListRowComponent: (props: VirtualListRowComponentProps<Item>) => VirtualListRowElement | null

Virtual List Row Component.

VirtualListRowComponentPropstype

VirtualListRowComponentProps: {
  item: Item;
  index: number;
  rowKey: string;
  isVisible: boolean;
}

Props for Virtual List Row Component.

index
index: number;
isVisible
isVisible: boolean;
item
item: Item;
rowKey
rowKey: string;

VirtualListStatetype

VirtualListState: {
  count: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  followBottom: boolean;
  pendingUnseenCount: number;
}

Virtual List State.

VirtualTabletype

VirtualTable: { <Row>(props: VirtualTableProps<Row>): JSX.Element; <Row>(props: VirtualTableAsChildProps<Row>): JSX.Element; }

Renders a part of `virtual-table`. Supports polymorphic rendering via `asChild`.

VirtualTableApitype

VirtualTableApi: {
  scrollToIndex: (index: number, alignment?: VirtualScrollAlignment) => void;
  scrollToTop: () => void;
  scrollToBottom: () => void;
  getState: () => VirtualTableState;
  getVisibleRange: () => VirtualRange;
  getRowCount: () => number;
  getScrollTop: () => number;
  isAtTop: () => boolean;
  isAtBottom: () => boolean;
  getSelectedRowKey: () => string | null;
  getSelectedRowIndex: () => number;
  selectRowByKey: (rowKey: string) => void;
  selectRowByIndex: (index: number) => void;
  clearSelection: () => void;
}

Virtual Table Api.

VirtualTableAsChildPropstype

VirtualTableAsChildProps: Omit<VirtualTableRootProps, 'children'> & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild: true;
  children: JSXElement;
}

Props for the `asChild` (polymorphic) rendering of Virtual Table.

apiRef
apiRef?: Ref<VirtualTableApi<Row> | null>;
asChild
asChild: true;
children
children: JSXElement;
columns
columns: readonly VirtualTableColumn<Row>[];
defaultSelectedRowKey
defaultSelectedRowKey?: string | null | undefined;
getKey
getKey: (row: Row, index: number) => string | number;
headerHeight
headerHeight: number;
onRowClick
onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;
onScroll
onScroll?: ((event: Event) => void) | undefined;
onSelectedRowKeyChange
onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowHeight
rowHeight: number;
rows
rows: readonly Row[];
selectedRowKey
selectedRowKey?: string | null | undefined;
tableWidth
tableWidth?: "compact" | undefined;
viewport
viewport?: "lg" | undefined;

VirtualTableCellComponenttype

VirtualTableCellComponent: (props: VirtualTableCellComponentProps<Row>) => VirtualTableCellElement | null

Virtual Table Cell Component.

VirtualTableCellComponentPropstype

VirtualTableCellComponentProps: {
  row: Row;
  rowIndex: number;
  rowKey: string;
  column: VirtualTableColumn<Row>;
  selected: boolean;
}

Props for Virtual Table Cell Component.

column
column: VirtualTableColumn<Row>;
row
row: Row;
rowIndex
rowIndex: number;
rowKey
rowKey: string;
selected
selected: boolean;

VirtualTableColumntype

VirtualTableColumn: {
  id: string;
  header: JSXElement | string;
  width?: number | string;
  cellComponent: VirtualTableCellComponent<Row>;
}

Virtual Table Column.

VirtualTablePropstype

VirtualTableProps: VirtualTableRootProps & {
  rows: readonly Row[];
  rowHeight: number;
  headerHeight: number;
  overscan?: VirtualOverscan;
  getKey: (row: Row, index: number) => string | number;
  columns: readonly VirtualTableColumn<Row>[];
  selectedRowKey?: string | null;
  defaultSelectedRowKey?: string | null;
  onSelectedRowKeyChange?: (next: string | null) => void;
  onRowClick?: (row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void;
  onScroll?: (event: Event) => void;
  viewport?: VirtualTableViewport;
  tableWidth?: VirtualTableWidth;
  apiRef?: Ref<VirtualTableApi<Row> | null>;
  ref?: Ref<HTMLElement>;
  asChild?: false;
}

Props for Virtual Table.

apiRef
apiRef?: Ref<VirtualTableApi<Row> | null>;
asChild
asChild?: false | undefined;
columns
columns: readonly VirtualTableColumn<Row>[];
defaultSelectedRowKey
defaultSelectedRowKey?: string | null | undefined;
getKey
getKey: (row: Row, index: number) => string | number;
headerHeight
headerHeight: number;
onRowClick
onRowClick?: ((row: Row, rowIndex: number, rowKey: string, event: MouseEvent) => void) | undefined;
onScroll
onScroll?: ((event: Event) => void) | undefined;
onSelectedRowKeyChange
onSelectedRowKeyChange?: ((next: string | null) => void) | undefined;
overscan
overscan?: VirtualOverscan | undefined;
ref
ref?: Ref<HTMLElement>;
rowHeight
rowHeight: number;
rows
rows: readonly Row[];
selectedRowKey
selectedRowKey?: string | null | undefined;
tableWidth
tableWidth?: "compact" | undefined;
viewport
viewport?: "lg" | undefined;

VirtualTableStatetype

VirtualTableState: {
  count: number;
  rowHeight: number;
  headerHeight: number;
  scrollTop: number;
  viewportHeight: number;
  totalHeight: number;
  visibleRange: VirtualRange;
  isAtTop: boolean;
  isAtBottom: boolean;
  selectedRowKey: string | null;
  selectedRowIndex: number;
}

Virtual Table State.

VISUALLY_HIDDEN_A11Y_CONTRACTtype

VISUALLY_HIDDEN_A11Y_CONTRACT: { readonly STRATEGY: "visually-hidden-but-screen-reader-visible"; readonly HOST_ELEMENT: "span"; }

Visually hidden content accessibility contract.

VisuallyHiddentype

VisuallyHidden: { (props: VisuallyHiddenSpanProps): JSX.Element; (props: VisuallyHiddenAsChildProps): JSX.Element; }

Renders a part of `visually-hidden`. Supports polymorphic rendering via `asChild`.

VisuallyHiddenA11yContracttype

VisuallyHiddenA11yContract: typeof VISUALLY_HIDDEN_A11Y_CONTRACT

Type of the Visually Hidden A11y Contract object.

VisuallyHiddenAsChildPropstype

VisuallyHiddenAsChildProps: VisuallyHiddenOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}

Props for the `asChild` (polymorphic) rendering of Visually Hidden.

asChild
asChild: true;
children
children: JSXElement;
ref
ref?: Ref<Element>;

VisuallyHiddenOwnPropstype

VisuallyHiddenOwnProps: {
  children?: unknown;
}

Own props for Visually Hidden, before merging with native element attributes.

children
children?: unknown;

VisuallyHiddenPropstype

VisuallyHiddenProps: VisuallyHiddenSpanProps | VisuallyHiddenAsChildProps

Props for Visually Hidden.

asChild
asChild?: boolean | undefined;
children
children?: unknown;
ref
ref?: ((value: HTMLSpanElement | null) => void) | { current: HTMLSpanElement | null; } | ((value: Element | null) => void) | { current: Element | null; } | null | undefined;

VisuallyHiddenSpanPropstype

VisuallyHiddenSpanProps: Omit<JSX.IntrinsicElements['span'], 'children' | 'ref'> & VisuallyHiddenOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLSpanElement>;
}

Props for Visually Hidden Span.

asChild
asChild?: false | undefined;
children
children?: unknown;
ref
ref?: Ref<HTMLSpanElement>;