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

Tabs

Tabs are used to organize content by grouping similar information on the same page.

usage: import { Tabs, Item, Header, Content, TabsContext, useTabsContext } from "@sharegate/orbit-ui";
wai-aria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel
sources: Github

Guidelines

Accessibility

An accessible title must be provided through aria-label property.

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 a <Tabs> component without keys.

Default

A default tabs.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

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

Icon

A tab can contain icons.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

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

Lozenge

A tab can contains a lozenge.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

<Tabs aria-label="Planets">
    <Item key="mars">
        <Header>Mars</Header>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item key="jupiter">
        <Header>
            <Text>Jupiter</Text>
            <Lozenge>New</Lozenge>
        </Header>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <Header>Venus</Header>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Tabs><Tabs aria-label="Planets">
    <Item key="mars">
        <Header>Mars</Header>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item key="jupiter">
        <Header>
            <Text>Jupiter</Text>
            <Lozenge>New</Lozenge>
        </Header>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <Header>Venus</Header>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Tabs>

Dynamic tabs

Tabs items can be rendered dynamically.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

<Tabs 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}>
            <Header>{header}</Header>
            <Content>{content}</Content>
        </Item>
    ))}
</Tabs><Tabs 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}>
            <Header>{header}</Header>
            <Content>{content}</Content>
        </Item>
    ))}
</Tabs>

Manually activated tabs

By default, tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

The content of a tab should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specifc tab, users can activate a tab by pressing Space or Enter.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

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

Async content

A tab can use useTabsContext to load async content when a tab is selected.

Editable example

function AsyncText({ id, children, ...rest }) {
    const [text, setText] = useState(null);

    const { selectedKey } = useTabsContext();

    useEffect(() => {
        let timeoutId;

        if (id === selectedKey) {
            timeoutId = setTimeout(() => {
                setText(children);
            }, 2000);
        } else {
            setText(null);
        }

        return () => {
            if (!isNil(timeoutId)) {
                clearTimeout(timeoutId);
            }
        };
    }, [id, selectedKey, children]);

    return (
        <Div {...rest}>
            {isNil(text) ? (
                <Div padding={10} position="relative">
                    <Div className="o-ui-sb-loading"></Div>
                </Div>
            ) : (
                text
            )}
        </Div>
    );
}

render(() => {
    return (
        <Tabs manual 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}>
                    <Header>{header}</Header>
                    <Content>
                        <AsyncText id={id}>{content}</AsyncText>
                    </Content>
                </Item>
            ))}
        </Tabs>
    );
});function AsyncText({ id, children, ...rest }) {
    const [text, setText] = useState(null);

    const { selectedKey } = useTabsContext();

    useEffect(() => {
        let timeoutId;

        if (id === selectedKey) {
            timeoutId = setTimeout(() => {
                setText(children);
            }, 2000);
        } else {
            setText(null);
        }

        return () => {
            if (!isNil(timeoutId)) {
                clearTimeout(timeoutId);
            }
        };
    }, [id, selectedKey, children]);

    return (
        <Div {...rest}>
            {isNil(text) ? (
                <Div padding={10} position="relative">
                    <Div className="o-ui-sb-loading"></Div>
                </Div>
            ) : (
                text
            )}
        </Div>
    );
}

render(() => {
    return (
        <Tabs manual 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}>
                    <Header>{header}</Header>
                    <Content>
                        <AsyncText id={id}>{content}</AsyncText>
                    </Content>
                </Item>
            ))}
        </Tabs>
    );
});

Orientation

A tabs component can be rendered vertically.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

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

Fluid

A tabs component can split the width of it's container equally between his tabs.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

<Tabs fluid aria-label="Planets">
    <Item key="mars">
        <Header>Mars</Header>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item key="jupiter">
        <Header>Jupiter</Header>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <Header>Venus</Header>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
    <Item key="earth">
        <Header>Earth</Header>
        <Content>
            Earth is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Tabs><Tabs fluid aria-label="Planets">
    <Item key="mars">
        <Header>Mars</Header>
        <Content>Mars is the fourth planet from the Sun and the second-smallest planet.</Content>
    </Item>
    <Item key="jupiter">
        <Header>Jupiter</Header>
        <Content>
            Jupiter is the fifth planet from the Sun and the largest in the Solar System.
        </Content>
    </Item>
    <Item key="venus">
        <Header>Venus</Header>
        <Content>
            Venus is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
    <Item key="earth">
        <Header>Earth</Header>
        <Content>
            Earth is the second planet from the Sun. It is named after the Roman goddess of love and
            beauty.
        </Content>
    </Item>
</Tabs>

Collapsible

A tabs component can handle horizontal overflow by collapsing the overflowing tabs in a popup.

Mars is a dusty, cold, desert world with a very thin atmosphere. There is strong evidence Mars was—billions of years ago—wetter and warmer, with a thicker atmosphere.

Editable example

<Div
    width={{
        base: "100%",
        sm: "700px"
    }}
>
    <Tabs fluid aria-label="Planets">
        <Item key="mars">
            <Header>Mars</Header>
            <Content>
                Mars is a dusty, cold, desert world with a very thin atmosphere. There is strong
                evidence Mars was—billions of years ago—wetter and warmer, with a thicker
                atmosphere.
            </Content>
        </Item>
        <Item key="jupiter">
            <Header>Jupiter</Header>
            <Content>
                Jupiter is more than twice as massive than the other planets of our solar system
                combined. The giant planet's Great Red spot is a centuries-old storm bigger than
                Earth.
            </Content>
        </Item>
        <Item key="venus">
            <Header>Venus</Header>
            <Content>
                Venus spins slowly in the opposite direction from most planets. A thick atmosphere
                traps heat in a runaway greenhouse effect, making it the hottest planet in our solar
                system.
            </Content>
        </Item>
        <Item key="earth">
            <Header>
                <Text>Earth</Text>
                <Lozenge>Home</Lozenge>
            </Header>
            <Content>
                Earth—our home planet—is the only place we know of so far that’s inhabited by living
                things. It's also the only planet in our solar system with liquid water on the
                surface.
            </Content>
        </Item>
        <Item key="saturn">
            <Header>Saturn</Header>
            <Content>
                Adorned with a dazzling, complex system of icy rings, Saturn is unique in our solar
                system. The other giant planets have rings, but none are as spectacular as Saturn's.
            </Content>
        </Item>
        <Item key="uranus">
            <Header>Uranus</Header>
            <Content>
                Uranus—seventh planet from the Sun—rotates at a nearly 90-degree angle from the
                plane of its orbit. This unique tilt makes Uranus appear to spin on its side.
            </Content>
        </Item>
        <Item key="neptune">
            <Header>Neptune</Header>
            <Content>
                Neptune—the eighth and most distant major planet orbiting our Sun—is dark, cold and
                whipped by supersonic winds. It was the first planet located through mathematical
                calculations, rather than by telescope.
            </Content>
        </Item>
        <Item key="pluto">
            <Header>Pluto</Header>
            <Content>
                Pluto is a complex world of ice mountains and frozen plains. Once considered the
                ninth planet, Pluto is the largest member of the Kuiper Belt and the best known of a
                new class of worlds called dwarf planets.
            </Content>
        </Item>
        <Item key="ceres">
            <Header>Ceres</Header>
            <Content>
                Ceres makes up almost a third of the asteroid belt's total mass, but it is still far
                smaller than Earth's Moon. Ceres is heavily cratered with large amounts of ice
                underground.
            </Content>
        </Item>
        <Item key="makemake">
            <Header>Makemake</Header>
            <Content>
                It takes 310 Earth years for Makemake to complete one orbit around our Sun.
            </Content>
        </Item>
        <Item key="haumea">
            <Header>Haumea</Header>
            <Content>
                Haumea is one of the fastest rotating large objects in our solar system.
            </Content>
        </Item>
        <Item key="eris">
            <Header>Eris</Header>
            <Content>
                Eris is one of the largest known dwarf planets in our solar system. It's about the
                same size as Pluto, but it is three times farther from the Sun. One orbit takes
                about 557 years.
            </Content>
        </Item>
        <Item key="planet-x">
            <Header>Planet X</Header>
            <Content>
                Caltech researchers have found evidence suggesting there may be a "Planet X" deep in
                the solar system.
            </Content>
        </Item>
    </Tabs>
</Div><Div
    width={{
        base: "100%",
        sm: "700px"
    }}
>
    <Tabs fluid aria-label="Planets">
        <Item key="mars">
            <Header>Mars</Header>
            <Content>
                Mars is a dusty, cold, desert world with a very thin atmosphere. There is strong
                evidence Mars was—billions of years ago—wetter and warmer, with a thicker
                atmosphere.
            </Content>
        </Item>
        <Item key="jupiter">
            <Header>Jupiter</Header>
            <Content>
                Jupiter is more than twice as massive than the other planets of our solar system
                combined. The giant planet's Great Red spot is a centuries-old storm bigger than
                Earth.
            </Content>
        </Item>
        <Item key="venus">
            <Header>Venus</Header>
            <Content>
                Venus spins slowly in the opposite direction from most planets. A thick atmosphere
                traps heat in a runaway greenhouse effect, making it the hottest planet in our solar
                system.
            </Content>
        </Item>
        <Item key="earth">
            <Header>
                <Text>Earth</Text>
                <Lozenge>Home</Lozenge>
            </Header>
            <Content>
                Earth—our home planet—is the only place we know of so far that’s inhabited by living
                things. It's also the only planet in our solar system with liquid water on the
                surface.
            </Content>
        </Item>
        <Item key="saturn">
            <Header>Saturn</Header>
            <Content>
                Adorned with a dazzling, complex system of icy rings, Saturn is unique in our solar
                system. The other giant planets have rings, but none are as spectacular as Saturn's.
            </Content>
        </Item>
        <Item key="uranus">
            <Header>Uranus</Header>
            <Content>
                Uranus—seventh planet from the Sun—rotates at a nearly 90-degree angle from the
                plane of its orbit. This unique tilt makes Uranus appear to spin on its side.
            </Content>
        </Item>
        <Item key="neptune">
            <Header>Neptune</Header>
            <Content>
                Neptune—the eighth and most distant major planet orbiting our Sun—is dark, cold and
                whipped by supersonic winds. It was the first planet located through mathematical
                calculations, rather than by telescope.
            </Content>
        </Item>
        <Item key="pluto">
            <Header>Pluto</Header>
            <Content>
                Pluto is a complex world of ice mountains and frozen plains. Once considered the
                ninth planet, Pluto is the largest member of the Kuiper Belt and the best known of a
                new class of worlds called dwarf planets.
            </Content>
        </Item>
        <Item key="ceres">
            <Header>Ceres</Header>
            <Content>
                Ceres makes up almost a third of the asteroid belt's total mass, but it is still far
                smaller than Earth's Moon. Ceres is heavily cratered with large amounts of ice
                underground.
            </Content>
        </Item>
        <Item key="makemake">
            <Header>Makemake</Header>
            <Content>
                It takes 310 Earth years for Makemake to complete one orbit around our Sun.
            </Content>
        </Item>
        <Item key="haumea">
            <Header>Haumea</Header>
            <Content>
                Haumea is one of the fastest rotating large objects in our solar system.
            </Content>
        </Item>
        <Item key="eris">
            <Header>Eris</Header>
            <Content>
                Eris is one of the largest known dwarf planets in our solar system. It's about the
                same size as Pluto, but it is three times farther from the Sun. One orbit takes
                about 557 years.
            </Content>
        </Item>
        <Item key="planet-x">
            <Header>Planet X</Header>
            <Content>
                Caltech researchers have found evidence suggesting there may be a "Planet X" deep in
                the solar system.
            </Content>
        </Item>
    </Tabs>
</Div>

Disabled

A tab can be disabled.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

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

Controlled

The selectedKey state can be handled in controlled mode.

Mars is the fourth planet from the Sun and the second-smallest planet.

Editable example

() => {
    const [selectedKey, setSelectedKey] = useState("mars");

    const handleSelectionChange = useCallback(
        (event, newKey) => {
            setSelectedKey(newKey);
            console.log(newKey);
        },
        [setSelectedKey]
    );

    return (
        <Tabs
            selectedKey={selectedKey}
            onSelectionChange={handleSelectionChange}
            aria-label="Planets"
        >
            <Item key="mars">
                <Header>Mars</Header>
                <Content>
                    Mars is the fourth planet from the Sun and the second-smallest planet.
                </Content>
            </Item>
            <Item key="jupiter">
                <Header>Jupiter</Header>
                <Content>
                    Jupiter is the fifth planet from the Sun and the largest in the Solar System.
                </Content>
            </Item>
            <Item key="venus">
                <Header>Venus</Header>
                <Content>
                    Venus is the second planet from the Sun. It is named after the Roman goddess of
                    love and beauty.
                </Content>
            </Item>
        </Tabs>
    );
};() => {
    const [selectedKey, setSelectedKey] = useState("mars");

    const handleSelectionChange = useCallback(
        (event, newKey) => {
            setSelectedKey(newKey);
            console.log(newKey);
        },
        [setSelectedKey]
    );

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

API

Tabs

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

Name Description Default

aria-label*

See WCAG.

string

autoFocus

Whether or not the first focusable tab should autoFocus on render.

numberfalsetrue

children*

React children.

collapsible

Whether or not the tabs could collapsed to fit into the available space.

falsetrue

true

defaultSelectedKey

The initial value of selectedKey when uncontrolled.

string

fluid

Whether or not the tabs take up the width of the container.

false | true | ResponsiveValue<boolean>

manual

Whether or not keyboard navigation changes focus between tabs but doens't activate it.

falsetrue

onSelectionChange

Called when the selected tab change.

(event: SyntheticEvent<Element, Event>, key: string) => void

`event`	React's original event.
`key`	The selected tab key.

orientation

The orientation of the tabs elements.

"horizontal" | "vertical" | ResponsiveValue<TabsOrientation>

horizontal

selectedKey

A controlled selected key.

string

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	-

usage: import { Header } from "@sharegate/orbit-ui";
slots: "icon", "text", "lozenge"
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	-

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	-

Tab

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

Name	Description	Default
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
onSelect*	Called when the tab is selected. (event: SyntheticEvent<Element, Event>, key: string) => void	-
selected	Whether or not the tab is selected. falsetrue	-
tab*	Matching tab item. TabType	-

TabPanel

usage: import { TabPanel } 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*	Matching panel item. PanelType	-

No Preview

Tabs

Guidelines

Accessibility

Usage

Default

Icon

Lozenge

Dynamic tabs

Manually activated tabs

Async content

Orientation

Fluid

Collapsible

Disabled

Controlled

API

Tabs

Item

Header

Content

Tab

TabPanel