Interface AccordionProps

interface AccordionProps {
    badge?: ReactElement<BadgeProps, string | JSXElementConstructor<any>> | ReactElement<BadgeProps, string | JSXElementConstructor<any>>[];
    children: ReactNode;
    className?: string;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    defaultExpanded?: boolean;
    disabled?: boolean;
    expanded?: boolean;
    id: string;
    isLoading?: boolean;
    lang?: "sv" | "en";
    negativeMargins?: boolean;
    onChange?: ((expanded: undefined | boolean) => void);
    onClick?: (() => void);
    slots?: {
        meta?: SlotContent<"meta">;
        startAdornment?: SlotContent<"startAdornment">;
    };
    subtitle?: ReactNode;
    sx?: SxProps<Theme>;
    title: ReactNode;
    titleComponent?: ElementType<any, (keyof IntrinsicElements)>;
    titleFontWeight?: "bold" | "medium" | "regular";
    titleVariant?:
        | "h2"
        | "h3"
        | "h4"
        | "body1";
    unmountOnCollapse?: boolean;
}

Hierarchy

  • Pick<AccordionSummaryProps,
        | "badge"
        | "slots"
        | "subtitle"
        | "title"
        | "titleComponent"
        | "titleFontWeight"
        | "titleVariant">
  • Pick<AccordionDetailsProps, "unmountOnCollapse">
    • AccordionProps

Properties

badge? children className? customAttribute? defaultExpanded? disabled? expanded? id isLoading? lang? negativeMargins? onChange? onClick? slots? subtitle? sx? title titleComponent? titleFontWeight? titleVariant? unmountOnCollapse?

Properties

Optionalbadge

badge?: ReactElement<BadgeProps, string | JSXElementConstructor<any>> | ReactElement<BadgeProps, string | JSXElementConstructor<any>>[]

Badge to be displayed in the accordion summary.

children

children: ReactNode

The content to be displayed when the accordion is expanded.

OptionalclassName

className?: string

Optional CSS class name.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionaldefaultExpanded

defaultExpanded?: boolean

If true, expands the accordion by default when the component mounts. Only controls the initial state - subsequent expand/collapse actions will be handled by user interaction. Use this for uncontrolled behavior where you just want to set the initial state.

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

Optionalexpanded

expanded?: boolean

Controls the expanded state of the accordion. Use this prop along with onChange to create a controlled component where you need to manage the state yourself. If not provided, the accordion will be uncontrolled and manage its own state internally.

id

id: string

A unique identifier for the <Accordion>. This is required to correctly associate <AccordionSummary> with <AccordionDetails> via WAI-ARIA attributes, ensuring proper accessibility for screen readers.

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component's content and all interactions will be disabled.

Optionallang

lang?: "sv" | "en"

Language used for internal translations.

OptionalnegativeMargins

negativeMargins?: boolean

If true, applies negative horizontal margins.

OptionalonChange

onChange?: ((expanded: undefined | boolean) => void)

Callback when accordion is changed.

OptionalonClick

onClick?: (() => void)

Callback when the item is clicked.

Optionalslots

slots?: {
    meta?: SlotContent<"meta">;
    startAdornment?: SlotContent<"startAdornment">;
}

Slots for meta and startAdornment.

Optionalsubtitle

subtitle?: ReactNode

Subtitle text in the AccordionSummary.

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

title

title: ReactNode

Main title text in the AccordionSummary.

OptionaltitleComponent

titleComponent?: ElementType<any, (keyof IntrinsicElements)>

Component used for the title, defaults to h2.

OptionaltitleFontWeight

titleFontWeight?: "bold" | "medium" | "regular"

Font weight of the title text.

OptionaltitleVariant

titleVariant?:
    | "h2"
    | "h3"
    | "h4"
    | "body1"

Variant of the title text.

OptionalunmountOnCollapse

unmountOnCollapse?: boolean

Determines if the child components should be unmounted when the accordion collapses. If true, the children are removed from the DOM when the accordion is not expanded. Defaults to false, keeping the children in the DOM but hidden.

Settings

Member Visibility

On This Page

Properties