Layout & navigation

AppRequiredMark

The shared required-field asterisk used beside form labels.

<app-required-mark />

<app-required-mark> is the red asterisk that sits beside a required field's label. It is a fixed decorative mark: one class, one character, always aria-hidden. Colour comes from the theme .required rule (--color-danger-text), never an inline hex.

Form primitives already render it when you pass required. Reach for this tag only when you compose a custom label that those primitives do not own. The Razor <app-required-mark> and the React <AppRequiredMark /> render identically on every surface.

Basic

Place it immediately after the label text. No attributes to set.

Beside a label
Email
Show code 
<span class="label d-inline-flex align-items-center gap-1">
  Email
  <app-required-mark />
</span>

Prefer the field's required flag

Every form control that owns its label already inserts the mark when required is true. Prefer that path.

AppInput with required
Pass required on the field. The asterisk and validation behaviour stay in sync without composing the mark by hand.
Show code 
<app-input label="Email" required="true" />
Compose only for custom labelsUse <app-required-mark> when the label is yours (a custom layout, a non-library field). Do not double the mark by adding it beside a field that already has required.

Accessibility

The asterisk is decorative. Assistive tech learns required state from the field, not from the glyph.

Always aria-hidden
The mark is hidden from the accessibility tree. Pair it with a real required attribute (or aria-required) on the control.
Show code 
<app-required-mark />
<!-- renders: <span class="required" aria-hidden="true">*</span> -->

When to use

Use it when

  • You compose a custom label for a required field the library does not own.
  • You need the same asterisk look outside <app-input> / <app-select> and their siblings.

Reach for something else when

  • The field already accepts a required attribute → pass required on the field
  • You want a status or count marker → AppBadge / AppStatusBadge
  • You need explanatory help beside the label → AppInfoTip

Best practices

Do
Company name
One asterisk flush against its label, using the shared mark.
Don't
Company name *
A hand-rolled star drifts in colour and spacing from every library field.
Do
Let the field own the mark via required.
Don't
Doubling the mark (outer label plus required) shows two asterisks or fights the field's own label.

Attributes

<app-required-mark> takes no attributes. It always renders the same <span class="required" aria-hidden="true">*</span>.