Accordion

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

Accordion API

Define a styled Accordion, using the useAccordion_unstable and useAccordionStyles_unstable hooks.

interface AccordionProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Indicates if Accordion support multiple Panels closed at the same time.
   */
  collapsible?: boolean;

  /**
   * Default value for the uncontrolled state of the panel.
   */
  defaultOpenItems?: unknown;

  /**
   * Indicates if Accordion support multiple Panels opened at the same time.
   */
  multiple?: boolean;

  /**
   * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.
   * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
   */
  navigation?: "linear" | "circular";

  /**
   * Callback to be called when the opened items change.
   */
  onToggle?: AccordionToggleEventHandler<unknown>;

  /**
   * Controls the state of the panel.
   */
  openItems?: unknown;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}

AccordionHeader API

Define a styled AccordionHeader, using the useAccordionHeader_unstable and useAccordionHeaderStyles_unstable hooks.

interface AccordionHeaderProps {
  as?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

  /**
   * The component to be used as button in heading
   */
  button?: NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps<"a">> | null>;

  children?: any;

  className?: string;

  /**
   * Expand icon slot rendered before (or after) children content in heading.
   */
  expandIcon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The position of the expand  icon slot in heading.
   */
  expandIconPosition?: "start" | "end";

  /**
   * Expand icon slot rendered before (or after) children content in heading.
   */
  icon?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Indicates if the AccordionHeader should be rendered inline.
   */
  inline?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * Size of spacing in the heading.
   */
  size?: "small" | "medium" | "large" | "extra-large";

  style?: CSSProperties;
}

AccordionItem API

Define a styled AccordionItem, using the useAccordionItem_unstable and useAccordionItemStyles_unstable hooks.

interface AccordionItemProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Disables opening/closing of panel.
   */
  disabled?: boolean;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;

  /**
   * Required value that identifies this item inside an Accordion component.
   */
  value: unknown;
}

AccordionPanel API

Define a styled AccordionPanel, using the useAccordionPanel_unstable and useAccordionPanelStyles_unstable hooks.

interface AccordionPanelProps {
  as?: "div";

  children?: any;

  className?: string;

  collapseMotion?: PresenceMotionSlotProps<CollapseParams> | null;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}