Field

Layout composition primitives for labels, descriptions, and errors.

Preview

Profile

Use field primitives to keep labels, descriptions, controls, and errors aligned across a form.

Full name

This appears on invoices and shared workspace receipts.

Team bio

A short summary helps teammates understand the project context.

Usage

import { FrFieldModule } from '@frame-ui-ng/components/field';
import { FrInputModule } from '@frame-ui-ng/components/input';

HTML

<div frField>
  <label frFieldLabel for="workspace-name">Workspace name</label>

  <div frFieldContent>
    <input frInput id="workspace-name" />
    <p frFieldDescription>Visible in share links and the global workspace switcher.</p>
  </div>
</div>

Examples

Basic field

Use the default field layout when labels, supporting text, and controls should stack naturally in a narrow form column.

Workspace name

Visible in share links and the global workspace switcher.

Invalid field

Invalid fields can react to Angular validation state and surface a single validation message below the control.

Summary

Include the release name and the audience that will see it.

A summary is required.

Field groups and separators

Combine field groups, legends, and separators when a form section offers multiple equivalent inputs or needs stronger sub-section boundaries.

Contact preferences

Primary email

Reach the release owner directly.

Shared support inbox

Use a shared mailbox when coverage rotates between teammates.

Custom Styling

Override field tokens on a local wrapper when a form section needs different spacing or more branded supporting typography without changing the structure.

Campaign owner

This preview applies softer field spacing and branded supporting colors.

Token Inspector

Hover the legend, field row, label, content stack, description, error area, or separator to inspect the spacing and typography tokens that shape the field layout.

Publication settings

Inspect how field primitives distribute spacing and typography between labels, controls, and supporting text.

Announcement title

Shown in the notification center and the release feed.

A title is required before publishing.

Design Tokens

Use these CSS custom properties to tune field spacing, legend and label typography, descriptions, errors, and separator styling without changing the field structure.

SCSS


  --frame-field-set-gap: 1.5rem;
  --frame-field-group-gap: 1rem;
  --frame-field-gap: 0.5rem;
  --frame-field-content-gap: 0.375rem;
  --frame-field-legend-color: var(--frame-foreground);
  --frame-field-legend-font-size: 1rem;
  --frame-field-legend-font-weight: 700;
  --frame-field-label-font-size: 0.875rem;
  --frame-field-label-font-weight: 600;
  --frame-field-label-color: var(--frame-foreground);
  --frame-field-description-color: var(--frame-muted-foreground);
  --frame-field-description-font-size: 0.8125rem;
  --frame-field-error-color: var(--frame-destructive);
  --frame-field-error-font-size: 0.8125rem;
  --frame-field-separator-gap: 0.75rem;
  --frame-field-separator-color: var(--frame-muted-foreground);
  --frame-field-separator-bg: var(--frame-border);
  --frame-field-separator-font-size: 0.75rem;