P11 Blazor UI Library – Bootstrap 5.3 Components

P11AccordionNative Component

The P11AccordionNative is a lightweight, pure HTML-based collapsible content component, built using the native <details> and <summary> elements. It offers 100% out-of-the-box accessibility compliance without relying on external frameworks like Bootstrap.

Note: Unlike Bootstrap-based accordions, each <code>P11AccordionNative</code> item operates independently. Opening one item will not automatically close others.

Standard Native Accordion (Initially Closed)

This is the standard appearance without special background colors. The text should be dark on a light background.

Standard Item 1

This is the content of the first native accordion item. It is closed by default.

It uses native browser features for expanding and collapsing.

Standard Item 2 with some spacing

This is the content of the second native accordion item.

Note the mt-3 class for top margin.

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Standard Native Accordion (Initially Closed)</h2>
    <p>
        This is the standard appearance without special background colors. The text should be dark on a light background.
    </p>
    <P11AccordionNative>
        <Title>
            <span>Standard Item 1</span>
        </Title>
        <ChildContent>
            <p>This is the content of the first native accordion item. It is closed by default.</p>
            <p>It uses native browser features for expanding and collapsing.</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative CssClass="mt-3">
        <Title>
            <span>Standard Item 2 with some spacing</span>
        </Title>
        <ChildContent>
            <p>This is the content of the second native accordion item.</p>
            <p>Note the <code>mt-3</code> class for top margin.</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with Initially Open Item

Item 1 (Initially Open!)

This content is visible as soon as the page loads.

Note the IsInitiallyOpen="true" parameter.

Item 2 (Initially Closed)

This item is initially closed.

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with Initially Open Item</h2>
    <P11AccordionNative IsInitiallyOpen="true">
        <Title>
            <span>Item 1 (Initially Open!)</span>
        </Title>
        <ChildContent>
            <p>This content is visible as soon as the page loads.</p>
            <p>Note the <code>IsInitiallyOpen="true"</code> parameter.</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative CssClass="mt-3">
        <Title>
            <span>Item 2 (Initially Closed)</span>
        </Title>
        <ChildContent>
            <p>This item is initially closed.</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with Custom Background Colors and AutoTextColor

Here, the text color is automatically derived based on the HeaderBackgroundVariant (with AutoTextColor="true").

Primary Header (Blue) - Text should be White

Background: Primary (blue), Text: White (automatically derived).

Success Header (Green) - Text should be White

Background: Success (green), Text: White (automatically derived).

Warning Header (Yellow) - Text should be Dark

Background: Warning (yellow), Text: Dark (automatically derived).

Light Header (Light Gray) - Text should be Dark

Background: Light (light gray), Text: Dark (automatically derived).

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with Custom Background Colors and AutoTextColor</h2>
    <p>
        Here, the text color is automatically derived based on the <code>HeaderBackgroundVariant</code> (with <code>AutoTextColor="true"</code>).
    </p>
    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Primary" AutoTextColor="true">
        <Title>
            <span>Primary Header (Blue) - Text should be White</span>
        </Title>
        <ChildContent>
            <p>Background: Primary (blue), Text: White (automatically derived).</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Success" AutoTextColor="true" CssClass="mt-3">
        <Title>
            <span>Success Header (Green) - Text should be White</span>
        </Title>
        <ChildContent>
            <p>Background: Success (green), Text: White (automatically derived).</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Warning" AutoTextColor="true" CssClass="mt-3">
        <Title>
            <span>Warning Header (Yellow) - Text should be Dark</span>
        </Title>
        <ChildContent>
            <p>Background: Warning (yellow), Text: Dark (automatically derived).</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Light" AutoTextColor="true" CssClass="mt-3">
        <Title>
            <span>Light Header (Light Gray) - Text should be Dark</span>
        </Title>
        <ChildContent>
            <p>Background: Light (light gray), Text: Dark (automatically derived).</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with Custom Background Colors and Explicit Text Color

Here, the ExplicitHeaderTextVariant is used to force the text color (AutoTextColor should be false or not set).

Danger Header (Red) - Explicit White Text

Background: Danger (red), Text: Explicit White.

Info Header (Light Blue) - Explicit Dark Text

Background: Info (light blue), Text: Explicit Dark.

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with Custom Background Colors and Explicit Text Color</h2>
    <p>
        Here, the <code>ExplicitHeaderTextVariant</code> is used to force the text color (<code>AutoTextColor</code> should be false or not set).
    </p>
    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Danger" ExplicitHeaderTextVariant="LabelVariant.White">
        <Title>
            <span>Danger Header (Red) - Explicit White Text</span>
        </Title>
        <ChildContent>
            <p>Background: Danger (red), Text: Explicit White.</p>
        </ChildContent>
    </P11AccordionNative>

    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Info" ExplicitHeaderTextVariant="LabelVariant.Dark" CssClass="mt-3">
        <Title>
            <span>Info Header (Light Blue) - Explicit Dark Text</span>
        </Title>
        <ChildContent>
            <p>Background: Info (light blue), Text: Explicit Dark.</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with 'ForceHighContrast'

If ForceHighContrast="true", both header and body should have a white background and dark text, regardless of other settings.

High Contrast Mode - Text should be Dark on White

All backgrounds should be white, all texts dark, for maximum readability.

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with 'ForceHighContrast'</h2>
    <p>
        If <code>ForceHighContrast="true"</code>, both header and body should have a white background and dark text, regardless of other settings.
    </p>
    <P11AccordionNative HeaderBackgroundVariant="BackgroundVariant.Primary" BodyBackgroundVariant="BackgroundVariant.Dark" ForceHighContrast="true">
        <Title>
            <span>High Contrast Mode - Text should be Dark on White</span>
        </Title>
        <ChildContent>
            <p>All backgrounds should be white, all texts dark, for maximum readability.</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with Focusable Body Content

The opened accordion body element should be focusable via the keyboard (tabindex="0").

Focusable Body Content (Press Tab after opening)

Try opening this accordion and then pressing the Tab key. Focus should jump into this content.

This is useful for content with interactive elements like links or .

Test Input

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with Focusable Body Content</h2>
    <p>
        The opened accordion body element should be focusable via the keyboard (<code>tabindex="0"</code>).
    </p>
    <P11AccordionNative IsInitiallyOpen="true" IsBodyFocusable="true" HeaderBackgroundVariant="BackgroundVariant.Light">
        <Title>
            <span>Focusable Body Content (Press Tab after opening)</span>
        </Title>
        <ChildContent>
            <p>Try opening this accordion and then pressing the Tab key. Focus should jump into this content.</p>
            <p>This is useful for content with interactive elements like <a href="#">links</a> or <button>buttons</button>.</p>
            <P11Input @bind-Value="@inputValue" Label="Test Input" placeholder="Type something here" />
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Native Accordion with Additional Attributes

Accordion with Custom Attributes and Inline Style

This element should have a purple border and the attribute data-custom-attribute="my-value".

Implementation

<div class="component-description mt-4">
    <h2 class="mb-3">Native Accordion with Additional Attributes</h2>
    <P11AccordionNative data-custom-attribute="my-value" style="border: 2px solid purple;" IsInitiallyOpen="true">
        <Title>
            <span>Accordion with Custom Attributes and Inline Style</span>
        </Title>
        <ChildContent>
            <p>This element should have a purple border and the attribute <code>data-custom-attribute="my-value"</code>.</p>
        </ChildContent>
    </P11AccordionNative>
</div>

// No specific C# code required for this example (component controlled directly in Razor markup).

Component API

Parameter	Type	Default	Description
`Title`	`RenderFragment?`	`null`	The title content displayed in the accordion header. This allows for rich content.
`Id`	`string?`	`null`	A unique identifier for the `<summary>` element. If not provided, a unique ID will be generated.
`IsInitiallyOpen`	`bool`	`false`	Sets whether the accordion panel should be open initially. Directly controls the 'open' attribute of the `<details>` tag.
`CssClass`	`string?`	`null`	Additional CSS classes to apply to the root `<details>` element. Typically Bootstrap utility classes for styling (e.g., 'mt-3', 'shadow').
`CssClassChild`	`string?`	`null`	Additional CSS classes to apply to the child `<child content>` element. Typically Bootstrap utility classes for styling (e.g., 'p-1', 'shadow').
`ChildContent`	`RenderFragment?`	`null`	The content to be displayed inside the accordion panel when it is open.
`AdditionalAttributes`	`Dictionary<string, object>?`	`new()`	Captures unmatched HTML attributes passed to the component and applies them to the root `<details>` element.
`HeaderBackgroundVariant`	`BackgroundVariant?`	`null`	The background color variant for the accordion header, aligning with Bootstrap's background color utilities.
`BodyBackgroundVariant`	`BackgroundVariant?`	`null`	The background color variant for the accordion body, aligning with Bootstrap's background color utilities.
`ForceHighContrast`	`bool`	`false`	If `true`, enforces a high contrast color scheme (dark text on white background), overriding background variant settings.
`AutoTextColor`	`bool`	`false`	If `true`, the header text color is automatically adjusted for optimal contrast based on `HeaderBackgroundVariant`.
`ExplicitHeaderTextVariant`	`LabelVariant`	`LabelVariant.Dark`	Explicitly sets the text color variant for the header. Overrides automatic derivation if `AutoTextColor` is false.
`IsBodyFocusable`	`bool`	`false`	If `true`, applies `tabindex='0'` to the body container, allowing keyboard focus into the content.