Label

Open source Core

Accessible form label for generated fields.

Version: v1.1.2
Stability: stable
License: MIT
Related: Field; Input; Fieldset

Full name

previews.components.label.default.blade.php Blade

<x-ui.label for="preview-name" :required="true">{{ __('Full name') }}</x-ui.label>

Installation

terminal

php artisan ui:add label

Registry contract

php artisan ui:add label writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/label.blade.php

Registry dependencies: None — installs on its own.
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

label.md

# Brok UI: Label (`label`)

Accessible form label for generated fields.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add label
```

## Usage

```blade
<x-ui.label for="preview-name" :required="true">{{ __('Full name') }}</x-ui.label>
```

## Props

- `for` (mixed|null, default `null`) — Id of the control this label targets; clicking the label focuses that control.
- `required` (bool, default `false`) — Appends a visible asterisk plus a screen-reader-only "(required)" note.

## Use when

- Use to collect, group, and clearly label related input so users understand what is being asked and can recover from errors.
- Giving a form control an accessible, clickable name that toggles focus to it.
- Marking a field required with a consistent visual and screen-reader-announced indicator.

## Avoid when

- Do not create dense unlabeled forms; start from one thing per page or one conceptual question per step when the task is unfamiliar or high stakes.
- Every input needs an explicit accessible label; placeholder text is not a reliable replacement.
- The control already renders its own visible label text, such as a button; do not double-label it.
- Plain descriptive text unrelated to a form control; use a text element instead.

## Anti-patterns

- Dense unlabeled forms
- Collecting information without a task need

## Rules

- Use the `<brok:label>` tag (or `<x-ui.label>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/label
- Registry JSON (files, props, contract): https://brokui.dev/r/open/label.json

Ask about Label in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
for	mixed \| null	null	Id of the control this label targets; clicking the label focuses that control.
required	bool	false	Appends a visible asterisk plus a screen-reader-only "(required)" note.

Slots

default — The label text.

Data slots

Stable hooks for CSS overrides and browser tests.

label

Behavior

Renders a native <label>; clicking anywhere in it focuses the control named by for.
Text wraps and breaks on long, unbroken or localized content instead of overflowing its container.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Form structure and labeling

Collect and organize related user input.

Use when

Use to collect, group, and clearly label related input so users understand what is being asked and can recover from errors.
Giving a form control an accessible, clickable name that toggles focus to it.
Marking a field required with a consistent visual and screen-reader-announced indicator.

Avoid when

Do not create dense unlabeled forms; start from one thing per page or one conceptual question per step when the task is unfamiliar or high stakes.
Every input needs an explicit accessible label; placeholder text is not a reliable replacement.
The control already renders its own visible label text, such as a button; do not double-label it.
Plain descriptive text unrelated to a form control; use a text element instead.

Use instead

Focused question pages
A smaller set of directly labeled fields

Anti-patterns

Dense unlabeled forms
Collecting information without a task need

Anatomy: root
Theming hooks: label

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Pairing for with a control's id gives that control its accessible name; without it, a screen reader may announce the control as unlabelled.
The required asterisk is aria-hidden and paired with an explicit sr-only "(required)" string, so the requirement is announced rather than only shown.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/label.blade.php Blade

@props([
    'for' => null,
    'required' => false,
])

<label
    @if ($for) for="{{ $for }}" @endif
    data-slot="label"
    {{ $attributes->merge(['class' => 'flex min-w-0 max-w-full items-center gap-1 break-all text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70']) }}
>
    {{ $slot }}
    @if ($required)
        <span class="text-destructive" aria-hidden="true">*</span>
        <span class="sr-only">{{ __('(required)') }}</span>
    @endif
</label>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.1.2
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0