# @askrjs/ui/accordion

> Published API exports for @askrjs/ui/accordion.

Source: [https://askrjs.com/docs/reference/api/ui/accordion](https://askrjs.com/docs/reference/api/ui/accordion)

Status: stable. Packages: @askrjs/ui/accordion.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 20 exports from the declarations shipped by @askrjs/ui.

### `Accordion`

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

Renders a part of `accordion`.

### `ACCORDION_A11Y_CONTRACT`

```ts
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.

### `AccordionA11yContract`

```ts
AccordionA11yContract: typeof ACCORDION_A11Y_CONTRACT
```

Type of the Accordion A11y Contract object.

### `AccordionContent`

```ts
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`.

### `AccordionContentAsChildProps`

```ts
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>;

### `AccordionContentOwnProps`

```ts
AccordionContentOwnProps: {
  forceMount?: boolean;
}
```

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

- `forceMount`: forceMount?: boolean | undefined;

### `AccordionContentProps`

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

Props for Accordion Content.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `forceMount`: forceMount?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

### `AccordionHeader`

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

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

Supports polymorphic rendering via `asChild`.

### `AccordionHeaderAsChildProps`

```ts
AccordionHeaderAsChildProps: BoxAsChildProps
```

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

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AccordionHeaderProps`

```ts
AccordionHeaderProps: BoxProps<'h3', HTMLHeadingElement>
```

Props for Accordion Header.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLHeadingElement>;

### `AccordionItem`

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

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

### `AccordionItemOwnProps`

```ts
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;

### `AccordionItemProps`

```ts
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;

### `AccordionMultipleProps`

```ts
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;

### `AccordionOrientation`

```ts
AccordionOrientation: 'vertical' | 'horizontal'
```

Accordion Orientation.

### `AccordionProps`

```ts
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;

### `AccordionSingleProps`

```ts
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;

### `AccordionTrigger`

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

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

Supports polymorphic rendering via `asChild`.

### `AccordionTriggerAsChildProps`

```ts
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;

### `AccordionTriggerProps`

```ts
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;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/visually-hidden/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/alert-dialog/index.md)