Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Accordion

Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.

usage: import { Accordion, Item, Header, Content, AccordionContext, useAccordionContext } from "@sharegate/orbit-ui";
wai-aria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion
sources: Github

Guidelines

Accessibility

The accordion header that shows and hides the content must be an heading element.
The heading element should have a level that is appropriate for the information architecture of the page. You can choose the appropriate level by selecting one of Orbit heading accordingly.

Usage

We recommend specifying a unique key prop for every <Item>. If you choose to omit the key prop, a key matching the <Item> position will be generated. For example, "0" would be the generated key for the first <Item> of an <Accordion> component without keys.

Default

A default accordion.

Editable example

<Accordion>
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion><Accordion>
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion>

Icon

An accordion item can contain icons.

Editable example

<Accordion>
    <Item key="mars">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Mars</Text>
        </H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Jupiter</Text>
        </H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Venus</Text>
        </H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion><Accordion>
    <Item key="mars">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Mars</Text>
        </H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Jupiter</Text>
        </H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>
            <PlaceholderMajorIcon />
            <Text>Venus</Text>
        </H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion>

Multiple

An accordion can allow multiple items to be expanded at once.

Editable example

<Accordion expansionMode="multiple">
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion><Accordion expansionMode="multiple">
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion>

Dynamic items

An accordion items can be rendered dynamically.

Editable example

<Accordion aria-label="Planets">
    {[
        {
            id: "mars",
            header: "Mars",
            content: "Mars is the fourth planet from the Sun and the second-smallest planet."
        },
        {
            id: "jupiter",
            header: "Jupiter",
            content: "Jupiter is the fifth planet from the Sun and the largest in the Solar System."
        },
        {
            id: "venus",
            header: "Venus",
            content:
                "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty."
        }
    ].map(({ id, header, content }) => (
        <Item key={id}>
            <H3>{header}</H3>
            <Content>{content}</Content>
        </Item>
    ))}
</Accordion><Accordion aria-label="Planets">
    {[
        {
            id: "mars",
            header: "Mars",
            content: "Mars is the fourth planet from the Sun and the second-smallest planet."
        },
        {
            id: "jupiter",
            header: "Jupiter",
            content: "Jupiter is the fifth planet from the Sun and the largest in the Solar System."
        },
        {
            id: "venus",
            header: "Venus",
            content:
                "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty."
        }
    ].map(({ id, header, content }) => (
        <Item key={id}>
            <H3>{header}</H3>
            <Content>{content}</Content>
        </Item>
    ))}
</Accordion>

Disabled

An accordion item can be disabled.

Editable example

<Accordion>
    <Item key="mars">
        <H3>Mars</H3>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item disabled key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion><Accordion>
    <Item key="mars">
        <H3>Mars</H3>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item disabled key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion>

Bordered

An accordion can be contained by borders.

Editable example

<Accordion variant="bordered">
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion><Accordion variant="bordered">
    <Item key="mars">
        <H3>Mars</H3>
        <Content>
            Mars is the fourth planet from the Sun and the second-smallest planet in the Solar
            System.
        </Content>
    </Item>
    <Item key="jupiter">
        <H3>Jupiter</H3>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <H3>Venus</H3>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Accordion>

Accordion context

The expandedKeys can be retrieved from useAccordionContext.

Editable example

function SelectedHeader({ header, children, ...rest }) {
    const { expandedKeys } = useAccordionContext();
    const { key } = header;

    return (
        <AccordionHeader
            {...rest}
            color={expandedKeys.includes(key) ? "accent-7" : undefined}
            header={header}
            headingType={H3}
        >
            {children}
        </AccordionHeader>
    );
}

render(() => {
    return (
        <Accordion aria-label="Planets">
            <Item key="mars">
                <SelectedHeader>Mars</SelectedHeader>
                <Content>
                    Mars is the fourth planet from the Sun and the second-smallest planet.
                </Content>
            </Item>
            <Item key="jupiter">
                <SelectedHeader>Jupiter</SelectedHeader>
                <Content>
                    Jupiter is the fifth planet from the Sun and the largest in the Solar System.
                </Content>
            </Item>
            <Item key="venus">
                <SelectedHeader>Venus</SelectedHeader>
                <Content>
                    Venus is the second planet from the Sun. It is named after the Roman goddess of
                    love and beauty.
                </Content>
            </Item>
        </Accordion>
    );
});function SelectedHeader({ header, children, ...rest }) {
    const { expandedKeys } = useAccordionContext();
    const { key } = header;

    return (
        <AccordionHeader
            {...rest}
            color={expandedKeys.includes(key) ? "accent-7" : undefined}
            header={header}
            headingType={H3}
        >
            {children}
        </AccordionHeader>
    );
}

render(() => {
    return (
        <Accordion aria-label="Planets">
            <Item key="mars">
                <SelectedHeader>Mars</SelectedHeader>
                <Content>
                    Mars is the fourth planet from the Sun and the second-smallest planet.
                </Content>
            </Item>
            <Item key="jupiter">
                <SelectedHeader>Jupiter</SelectedHeader>
                <Content>
                    Jupiter is the fifth planet from the Sun and the largest in the Solar System.
                </Content>
            </Item>
            <Item key="venus">
                <SelectedHeader>Venus</SelectedHeader>
                <Content>
                    Venus is the second planet from the Sun. It is named after the Roman goddess of
                    love and beauty.
                </Content>
            </Item>
        </Accordion>
    );
});

Controlled

The expandedKeys state can be handled in controlled mode.

Editable example

() => {
    const [expandedKeys, setExpandedKeys] = useState([]);

    const handleExpansionChange = useCallback(
        (event, keys) => {
            setExpandedKeys(keys);
            console.log(keys);
        },
        [setExpandedKeys]
    );

    return (
        <Accordion expandedKeys={expandedKeys} onExpansionChange={handleExpansionChange}>
            <Item key="mars">
                <H3>Mars</H3>
                <Content>
                    Mars is the fourth planet from the Sun and the second-smallest planet.
                </Content>
            </Item>
            <Item key="jupiter">
                <H3>Jupiter</H3>
                <Content>
                    Jupiter is the fifth planet from the Sun and the largest in the Solar System.
                </Content>
            </Item>
            <Item key="venus">
                <H3>Venus</H3>
                <Content>
                    Venus is the second planet from the Sun. It is named after the Roman goddess of
                    love and beauty.
                </Content>
            </Item>
        </Accordion>
    );
};() => {
    const [expandedKeys, setExpandedKeys] = useState([]);

    const handleExpansionChange = useCallback(
        (event, keys) => {
            setExpandedKeys(keys);
            console.log(keys);
        },
        [setExpandedKeys]
    );

    return (
        <Accordion expandedKeys={expandedKeys} onExpansionChange={handleExpansionChange}>
            <Item key="mars">
                <H3>Mars</H3>
                <Content>
                    Mars is the fourth planet from the Sun and the second-smallest planet.
                </Content>
            </Item>
            <Item key="jupiter">
                <H3>Jupiter</H3>
                <Content>
                    Jupiter is the fifth planet from the Sun and the largest in the Solar System.
                </Content>
            </Item>
            <Item key="venus">
                <H3>Venus</H3>
                <Content>
                    Venus is the second planet from the Sun. It is named after the Roman goddess of
                    love and beauty.
                </Content>
            </Item>
        </Accordion>
    );
};

API

Accordion

usage: import { Accordion } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name Description Default

autoFocus

Whether or not the first focusable accordion item should autoFocus on render.

numberfalsetrue

children*

React children

defaultExpandedKeys

The initial value of expandedKeys when uncontrolled.

string[]

expandedKeys

A controlled set of expanded item keys.

string[]

expansionMode

The type of expansion that is allowed.

"multiple""single"

"single"

onExpansionChange

Called when an accordion item is toggled.

(event: SyntheticEvent<Element, Event>, keys: string[]) => void

`event`	React's original event.
`keys`	The keys of the expanded items.

variant

The accordion style to use.

"borderless""bordered"

"borderless"

Item

usage: import { Item } from "@sharegate/orbit-ui";

Name	Description	Default
children	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
key	A unique key to identify the item. string	-

Content

usage: import { Content } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
slot	Slot to render into. string	-

AccordionHeader

usage: import { AccordionHeader } from "@sharegate/orbit-ui";
slots: "icon", "text"
extends: Button
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
disabled	Whether or not the tab is disabled. falsetrue	-
header*	The header item props. { key: string; }	-
headingProps	Additional props to render on the heading wrapper element. Partial<Omit<OmitInternalProps<InnerHeadingProps, never>, "ref"> & RefAttributes<any>>	-
headingType*	The heading component type. string \| ComponentClass<any, any> \| FunctionComponent<any>	-

AccordionPanel

usage: import { AccordionPanel } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
panel	The panel item props { key: string; }	-

No Preview

Accordion

Guidelines

Accessibility

Usage

Default

Mars

Jupiter

Venus

Icon

Mars

Jupiter

Venus

Multiple

Mars

Jupiter

Venus

Dynamic items

Mars

Jupiter

Venus

Disabled

Mars

Jupiter

Venus

Bordered

Mars

Jupiter

Venus

Accordion context

Mars

Jupiter

Venus

Controlled

Mars

Jupiter

Venus

API

Accordion

Item

Content

AccordionHeader

AccordionPanel