p11 UI
true-perfect-code
Version: 1.1.69

P11Label Component

The P11Label component is a highly versatile content display element that extends beyond a simple HTML <label>. It can render any text or RenderFragment, associate with form controls, apply extensive styling (typography, colors, weight, etc.), and even respond to click events, acting as an accessible button when interactive.
Note: When an OnClick event is provided, the component behaves like a button for accessibility purposes. Pay attention to the interaction between ChildContent, Text, and the various styling/color parameters, especially ForceHighContrast and AutoTextColor.

P11Label Component Examples

This page demonstrates the various modes, styling options, and accessibility features of the P11Label component.

1. Basic Usage: Simple Text Labels

Demonstrates rendering without specific interactivity or form association.

This is a simple label (using Text).

This is a simple label (using ChildContent).

Strong Text Label (ChildContent with HTML).

Label with a very long text to demonstrate wrapping capabilities if container is small, otherwise it will just take up space.

Implementation

<h4 class="mb-3">1. Basic Usage: Simple Text Labels</h4>
<p>Demonstrates rendering without specific interactivity or form association.</p>
<div class="d-flex flex-column gap-2 mb-4">
    <P11Label Text="This is a simple label (using Text)." />
    <P11Label>This is a simple label (using ChildContent).</P11Label>
    <P11Label><strong>Strong Text</strong> Label (ChildContent with HTML).</P11Label>
    <P11Label Text="Label with a very long text to demonstrate wrapping capabilities if container is small, otherwise it will just take up space." />
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

2. Background Styling (BackgroundVariant)

Labels with various background colors. The p-2 rounded class is added for better visibility of the background area.

With Text:

Primary Bg

Success Bg

Dark Bg

Body Bg

With ChildContent (e.g., icons):

"Empty" Labels with Background (requires padding to be visible):

Label content missing!

Label content missing!

Label content missing!

Implementation

<h4 class="mb-3">2. Background Styling (<code>BackgroundVariant</code>)</h4>
<p>Labels with various background colors. The <code>p-2 rounded</code> class is added for better visibility of the background area.</p>
<div class="d-flex flex-wrap gap-3 mb-4">
    <h6>With Text:</h6>
    <P11Label Text="Primary Bg" BackgroundVariant="BackgroundVariant.Primary" LabelVariant="LabelVariant.White" CssClass="p-2 rounded" />
    <P11Label Text="Success Bg" BackgroundVariant="BackgroundVariant.Success" LabelVariant="LabelVariant.White" CssClass="p-2 rounded" />
    <P11Label Text="Dark Bg" BackgroundVariant="BackgroundVariant.Dark" LabelVariant="LabelVariant.Light" CssClass="p-2 rounded" />
    <P11Label Text="Body Bg" BackgroundVariant="BackgroundVariant.Body" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" />

    <h6>With ChildContent (e.g., icons):</h6>
    <P11Label BackgroundVariant="BackgroundVariant.Warning" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" AriaLabel="Warning Icon Background">
        <i class="bi bi-exclamation-triangle-fill fs-4"></i>
    </P11Label>
    <P11Label BackgroundVariant="BackgroundVariant.Info" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" AriaLabel="Info Icon Background">
        <i class="bi bi-info-circle-fill fs-4"></i>
    </P11Label>

    <h6>"Empty" Labels with Background (requires padding to be visible):</h6>
    <P11Label BackgroundVariant="BackgroundVariant.Secondary" CssClass="p-3 rounded" />
    <P11Label BackgroundVariant="BackgroundVariant.Danger" CssClass="p-3 rounded" />
    <P11Label BackgroundVariant="BackgroundVariant.Light" CssClass="p-3 rounded border" /> @* Added border for light bg visibility *@
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

3. Form Field Labels (Semantic <label> with for attribute)

Shows how P11Label links to form elements for accessibility.

Example of an input field.

Implementation

<h4 class="mb-3">3. Form Field Labels (Semantic <code>&lt;label&gt;</code> with <code>for</code> attribute)</h4>
<p>Shows how <code>P11Label</code> links to form elements for accessibility.</p>
<div class="row mb-4">
    <div class="col-md-6">
        <div class="mb-3">
            <P11Label ForId="exampleInputText" Text="Text Input Label" IsRequired="true" />
            <input type="text" class="form-control" id="exampleInputText" placeholder="Enter text..." aria-required="true" />
            <div class="form-text">Example of an input field.</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <P11Label ForId="exampleInputNumber" Text="Number Input Label" />
            <input type="number" class="form-control" id="exampleInputNumber" placeholder="Enter number..." />
        </div>
    </div>
    <div class="col-md-6">
        <div class="mb-3">
            <P11Label ForId="exampleCheckbox" Text="Check me out" />
            <input type="checkbox" class="form-check-input" id="exampleCheckbox" />
        </div>
    </div>
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

4. Interactive / Clickable Labels (<div role="button" with onclick)

Demonstrates labels that behave like buttons. Click on them and observe the Event Log below.

Clickable Text (Console Log)
Save Changes
Label content missing!
Invalid Config (Check Console)

Event Log for P11Label:

This log displays events triggered by interactive P11Label components.

Implementation

<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">4. Interactive / Clickable Labels (<code>&lt;div role="button"</code> with <code>onclick</code>)</h4>
    <p>Demonstrates labels that behave like buttons. Click on them and observe the Event Log below.</p>
    <div class="d-flex flex-wrap gap-3 mb-4">
        <P11Label Text="Clickable Text (Console Log)" OnClick="@(() => LogEventLabel("Clickable Label clicked!"))" />
        <P11Label OnClick="@(() => LogEventLabel("Icon Label clicked!"))" AriaLabel="Information Icon Button">
            <i class="bi bi-info-circle-fill fs-4"></i>
        </P11Label>
        <P11Label OnClick="@(() => LogEventLabel("Save Label clicked!"))">
            <i class="bi bi-save-fill fs-4 me-2"></i> Save Changes
        </P11Label>

        @* This should trigger the Accessibility Warning: No visible content and no AriaLabel *@
        <P11Label OnClick="@(() => LogEventLabel("Invisible Clicked!"))" ShowDevelopmentErrors="true">
            @* This label intentionally has no Text or ChildContent and no AriaLabel *@
        </P11Label>

        @* This should trigger the Configuration Warning: OnClick and ForId used together *@
        <P11Label Text="Invalid Config (Check Console)" OnClick="@(() => LogEventLabel("Invalid config label clicked!"))" ForId="someId" ShowDevelopmentErrors="true" />
    </div>
</div>

<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">Event Log for P11Label:</h4>
    <p>This log displays events triggered by interactive <code>P11Label</code> components.</p>
    <div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
        @foreach (var logEntry in eventLogLabel)
        {
            <div>@logEntry</div>
        }
    </div>
</div>
@code {
    private List<string> eventLogLabel = new List<string>();

    private void LogEventLabel(string message)
    {
        eventLogLabel.Add($"{DateTime.Now:HH:mm:ss} - {message}");
        // Keep log from growing indefinitely
        if (eventLogLabel.Count > 20)
        {
            eventLogLabel.RemoveAt(0);
        }
        StateHasChanged(); // Re-render to show updated log
    }
}

5. Styling Options (LabelVariant, LabelTypography, Weight, Background, etc.)

Showcasing various Bootstrap utility classes applied via parameters.

Primary Bold

Success Italic

Warning Underlined

Danger Strikethrough

Info Uppercase

Monospace Code

Display 4 Center

H5 Muted

Custom Orange

Disabled Label

Primary Background

Success Background

Dark Background

Body Background

White Background

Transparent Background

Implementation

<h4 class="mb-3">5. Styling Options (<code>LabelVariant</code>, <code>Typography</code>, <code>Weight</code>, <code>Background</code>, etc.)</h4>
<p>Showcasing various Bootstrap utility classes applied via parameters.</p>
<div class="d-flex flex-wrap gap-3 mb-4">
    <P11Label Text="Primary Bold" LabelVariant="LabelVariant.Primary" Weight="Weight.Bold" />
    <P11Label Text="Success Italic" LabelVariant="LabelVariant.Success" Italic="true" />
    <P11Label Text="Warning Underlined" LabelVariant="LabelVariant.Warning" Underline="true" />
    <P11Label Text="Danger Strikethrough" LabelVariant="LabelVariant.Danger" Strikethrough="true" />
    <P11Label Text="Info Uppercase" LabelVariant="LabelVariant.Info" TextTransform="TextTransform.Uppercase" />
    <P11Label Text="Monospace Code" Monospace="true" CssClass="bg-light p-1 rounded" />
    <P11Label Text="Display 4 Center" Typography="LabelTypography.Display_4" HorizontalAlignment="HorizontalAlignment.Center" CssClass="w-100" />
    <P11Label Text="H5 Muted" Typography="LabelTypography.H5" LabelVariant="LabelVariant.Muted" />
    <P11Label Text="Custom Orange" CustomColor="orange" Weight="Weight.Bolder" />
    <P11Label Text="Disabled Label" Disabled="true" />

    @* --- Added BackgroundVariant Tests --- *@
    <P11Label Text="Primary Background" BackgroundVariant="BackgroundVariant.Primary" LabelVariant="LabelVariant.White" CssClass="p-2 rounded" />
    <P11Label Text="Success Background" BackgroundVariant="BackgroundVariant.Success" LabelVariant="LabelVariant.White" CssClass="p-2 rounded" />
    <P11Label Text="Dark Background" BackgroundVariant="BackgroundVariant.Dark" LabelVariant="LabelVariant.Light" CssClass="p-2 rounded" />
    <P11Label Text="Body Background" BackgroundVariant="BackgroundVariant.Body" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" />
    <P11Label Text="White Background" BackgroundVariant="BackgroundVariant.White" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" />
    <P11Label Text="Transparent Background" BackgroundVariant="BackgroundVariant.Transparent" LabelVariant="LabelVariant.Dark" CssClass="p-2 rounded" />
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

6. Accessibility & Contrast Enforcement

Demonstrates ForceHighContrast and AutoTextColor features.

Force High Contrast (Primary Background)

Auto Text Color (Success Background)

Auto Text Color (Light Background)

Auto Text Color (Dark Background)

High Contrast Override Auto Text (Red Background)

Auto Text Color (No Background, should default)

Implementation

<h4 class="mb-3">6. Accessibility & Contrast Enforcement</h4>
<p>Demonstrates <code>ForceHighContrast</code> and <code>AutoTextColor</code> features.</p>
<div class="d-flex flex-wrap gap-3 mb-4">
    <P11Label Text="Force High Contrast (Primary Background)" BackgroundVariant="BackgroundVariant.Primary" ForceHighContrast="true" CssClass="p-2 rounded" />
    <P11Label Text="Auto Text Color (Success Background)" BackgroundVariant="BackgroundVariant.Success" AutoTextColor="true" CssClass="p-2 rounded" />
    <P11Label Text="Auto Text Color (Light Background)" BackgroundVariant="BackgroundVariant.Light" AutoTextColor="true" CssClass="p-2 rounded" />
    <P11Label Text="Auto Text Color (Dark Background)" BackgroundVariant="BackgroundVariant.Dark" AutoTextColor="true" CssClass="p-2 rounded" />
    <P11Label Text="High Contrast Override Auto Text (Red Background)" BackgroundVariant="BackgroundVariant.Danger" ForceHighContrast="true" AutoTextColor="true" CssClass="p-2 rounded" />
    <P11Label Text="Auto Text Color (No Background, should default)" AutoTextColor="true" CssClass="p-2 rounded border" />
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

7. Additional Attributes & Custom CSS Class

Passing arbitrary HTML attributes and custom classes.

Tooltip on hover

With Data Attribute

Custom Border

Clickable with Custom Class

Implementation

<h4 class="mb-3">7. Additional Attributes & Custom CSS Class</h4>
<p>Passing arbitrary HTML attributes and custom classes.</p>
<div class="d-flex flex-wrap gap-3 mb-4">
    <P11Label Text="Tooltip on hover" title="This is a custom tooltip!" />
    <P11Label Text="With Data Attribute" data-custom-id="12345" />
    <P11Label Text="Custom Border" CssClass="border border-info p-2 rounded" />
    <P11Label Text="Clickable with Custom Class" OnClick="@(() => LogEventLabel("Custom class clicked!"))" class="bg-warning text-dark p-2 rounded-pill shadow-sm" />
</div>
@code {
    private List<string> eventLogLabel = new List<string>();

    private void LogEventLabel(string message)
    {
        eventLogLabel.Add($"{DateTime.Now:HH:mm:ss} - {message}");
        // Keep log from growing indefinitely
        if (eventLogLabel.Count > 20)
        {
            eventLogLabel.RemoveAt(0);
        }
        StateHasChanged(); // Re-render to show updated log
    }
}

8. Empty Label (with Fallback)

What happens if no content is provided? By default, it will render an empty span/label. If OnClick is present without visible content or AriaLabel, a development warning will appear.

Label content missing!

Label content missing!

Event Log for P11Label:

This log displays events triggered by interactive P11Label components.

Implementation

<h4 class="mb-3">8. Empty Label (with Fallback)</h4>
<p>What happens if no content is provided? By default, it will render an empty span/label. If <code>OnClick</code> is present without visible content or <code>AriaLabel</code>, a development warning will appear.</p>
<P11Label />
<P11Label ForId="someOtherInput" />
<P11Label OnClick="@(() => LogEventLabel("Empty clicked"))" ShowDevelopmentErrors="false" />
@* Suppress warning (ShowDevelopmentErrors="true") to see default content *@
@code {
    private List<string> eventLogLabel = new List<string>();

    private void LogEventLabel(string message)
    {
        eventLogLabel.Add($"{DateTime.Now:HH:mm:ss} - {message}");
        // Keep log from growing indefinitely
        if (eventLogLabel.Count > 20)
        {
            eventLogLabel.RemoveAt(0);
        }
        StateHasChanged(); // Re-render to show updated log
    }
}

Component API

Parameter Type Default Description
ChildContent RenderFragment? null Gets or sets the content to be rendered inside the label. This is typically the text for the label. If both Text and ChildContent are provided, ChildContent will take precedence.
Text string? null Gets or sets the text content of the label. This parameter is intended for simple text display.
ForId string? null Gets or sets the ID of the form control that the label is for. This links the label to its associated input element for accessibility.
IsRequired bool false Gets or sets a value indicating whether the label should display a "required" indicator (e.g., an asterisk).
CssClass string? null Gets or sets additional CSS class names to be applied to the label element.
Disabled bool false Gets or sets a value indicating whether the label should be displayed in a disabled state. This applies Bootstrap's 'text-body-secondary' for color and 'pe-none' to prevent pointer events.
Weight Weight Weight.Normal Gets or sets the font weight of the label.
HorizontalAlignment HorizontalAlignment HorizontalAlignment.None Gets or sets the horizontal text alignment of the label.
LabelVariant LabelVariant? null Specifies the label's variant (e.g., Primary, Success, Muted) affecting its text color. If not provided (null), no specific text color class will be applied. Overridden if AutoTextColor or ForceHighContrast is true.
CustomColor string? null Gets or sets a custom color for the label's text, e.g., "#FF0000" or "blue". Applied as an inline style only if no LabelVariant is specified, and AutoTextColor and ForceHighContrast are false.
LabelTypography LabelTypography? null Gets or sets the typography style for the label, applying Bootstrap's text utility classes. If not set (null), no specific typography class is applied.
Strikethrough bool false Gets or sets a value indicating whether the label's text should be struck through. Applies Bootstrap's 'text-decoration-line-through' utility class.
BackgroundVariant BackgroundVariant? null Gets or sets the background color variant for the label, aligning with Bootstrap's background color utilities. If not set (null), no specific background color is applied. Consider using contrasting text colors for readability.
Italic bool false Gets or sets a value indicating whether the label's text should be italic. Applies Bootstrap's 'fst-italic' utility class.
Underline bool false Gets or sets a value indicating whether the label's text should be underlined. Applies Bootstrap's 'text-decoration-underline' utility class.
TextTransform TextTransform? null Gets or sets the text transformation (case) for the label, aligning with Bootstrap's text transformation utilities. If not set (null), no transformation is applied.
Monospace bool false Gets or sets a value indicating whether the label's text should be displayed in a monospace font. Applies Bootstrap's 'font-monospace' utility class.
ForceHighContrast bool false Gets or sets a value indicating whether a high contrast color scheme (dark text on white background) should be enforced for accessibility. This will override LabelVariant, CustomColor, BackgroundVariant, and AutoTextColor settings.
AutoTextColor bool false Gets or sets a value indicating whether the label's text color should be automatically adjusted for optimal contrast based on the BackgroundVariant. If true, this will override any explicitly set LabelVariant or CustomColor, unless ForceHighContrast is also true.
AriaLabel string? null Gets or sets the accessible label for the component, used by screen readers when the component is interactive (role="button"). This is especially important if ChildContent is an icon or not sufficiently descriptive on its own. If not provided, the accessible name will be derived from the visible ChildContent or Text.
AdditionalAttributes Dictionary<string, object>? null Captures all un-matched attributes that are passed to the component. These attributes will be applied to the underlying HTML 'label' element, 'div', or 'p' element.
Events
OnClick EventCallback<MouseEventArgs> - Gets or sets an EventCallback that is invoked when the label or text content is clicked. If an OnClick handler is provided, the component will render as a keyboard-focusable, accessible button-like element. In this case, the ForId parameter will be ignored.
An unhandled error has occurred. Reload 🗙