@askrjs/ui/accordion

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;

AccordionOrientationtype

AccordionOrientation: 'vertical' | 'horizontal'

Accordion Orientation.

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;