Skip to main content Sidebar
Design tokens Components Layout Style utilities
Privacy Code of Conduct Licence Impressum
© 2025 Placer • Built with Astro

We’d love to hear from you. Please reach out to us with any questions or inquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it!
Skip to table of contents

The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

    Tab Group

    <pc-tab-group> 0.1.0 experimental

    Tab groups organise content into a container that shows one section at a time.

    This component makes use of tabs and tab panels. Each tab must be slotted into the navigation slot and its panel must refer to a tab panel of the same name.

    <pc-tab-group>
    <pc-tab slot="navigation" panel="general">General</pc-tab>
    <pc-tab slot="navigation" panel="custom">Custom</pc-tab>
    <pc-tab slot="navigation" panel="advanced">Advanced</pc-tab>
    <pc-tab slot="navigation" panel="disabled" disabled>
        Disabled
    </pc-tab>

    <pc-tab-panel name="general">
        This is the general tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="custom">
        This is the custom tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="advanced">
        This is the advanced tab panel.
    </pc-tab-panel>
    <pc-tab-panel name="disabled">
        This is a disabled tab panel.
    </pc-tab-panel>
</pc-tab-group>
    Code Edit

    Demos#

    Tabs on bottom#

    Tabs can be shown on the bottom by setting the placement attribute to bottom.

    Edit

    Tabs on start#

    Tabs can be shown on the starting side by setting the placement attribute to start.

    Edit

    Tabs on end#

    Tabs can be shown on the ending side by setting the placement attribute to end.

    Edit

    Closable tabs#

    Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is pressed.

    Edit

    Scrolling tabs#

    When there are more tabs than horizontal space allows, the tab navigation bar will be scrollable.

    Edit

    Fixed scroll controls#

    When tabs are scrolled all the way to one side, the scroll button on that side isn’t visible. Set the fixed-scroll-controls to always show both scroll buttons.

    Edit

    Manual activation#

    When focused, keyboard users can press ← and → to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behaviour by setting activation="manual" which will require the user to press Space or Enter before showing the tab panel (manual activation).

    Edit

    Properties#

    NameDescriptionReflectsDefault
    placementThe placement of the tabs.
    Type: "top" | "bottom" | "start" | "end"    		 "top"
    activationWhen this is set to auto, navigating the tabs with the arrow keys will instantly show the corresponding tab panel. If this is set to manual, the tab will receive focus but will not show the corresponding tab panel until the user presses Space or Enter/Return.
    Type: "auto" | "manual"    		 "auto"
    noScrollControls
    no-scroll-controls    		Hides the scroll buttons when tabs overflow.
    Type: boolean    		 false
    fixedScrollControls
    fixed-scroll-controls    		Prevents the scroll buttons from being hidden when it isn’t needed.
    Type: boolean    		 false
    updateComplete A read‐only promise that resolves when the component has finished updating. ‐

    Learn more about attributes and properties.

    Slots#

    NameDescription
    (default)Used for grouping tab panels in the tab group. It must only contain <pc-tab-panel> elements.
    navigationUsed for grouping tabs in the tab group. It must only contain <pc-tab> elements.

    Learn more about using slots.

    Methods#

    NameDescriptionArguments
    show()Shows the specified tab panel.panel: string

    Learn more about methods.

    Events#

    NameDescriptionEvent detail
    pc-tab-showEmitted when a tab is shown.{ name: String }
    pc-tab-hideEmitted when a tab is hidden.{ name: String }

    Learn more about events.

    Custom properties#

    NameDescriptionDefault
    --indicator-colorThe colour of the active tab indicator.var(--pc-color-primary-fill-loud)
    --track-widthThe indicator track’s width.4px

    Learn more about customising custom properties.

    Parts#

    NameDescription
    baseThe component’s base wrapper.
    navigationThe tab group’s navigation container where tabs are slotted in.
    tabsThe container that wraps the tabs.
    active-tab-indicatorThe indicator that highlights the currently selected tab.
    bodyThe tab group’s body where tab panels are slotted in.
    scroll-buttonThe previous/next scroll buttons that show when tabs are scrollable, a <pc-button>.
    scroll-button-startThe scroll button that scrolls to the start.
    scroll-button-endThe scroll button that scrolls to the end.
    scroll-button-baseThe scroll buttons’ base part.

    Learn more about customising CSS parts.

    Importing#

    If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

    CDN (script tag) CDN (import) npm (import)

    To manually import this component from the CDN, copy this code snippet and paste it in your HTML. 

    <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/tab-group/tab-group.js"></script>

    To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file. 

    import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/tab-group/tab-group.js";

    To manually import this component from npm, copy this code snippet and paste it in your JavaScript file. 

    import "placer-toolkit/dist/components/tab-group/tab-group.js";

    Dependencies#

    This component automatically imports these components: