Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 24
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

Form Field

<tng-form-field> is the optional wrapper for a complete field: label, one control, hint text, error text, and field-level state styling.

Use it when the label and messages should travel with the control. Keep <tng-input-field> for the narrower prefix/suffix input shell.

By default the field spans the full width of its container; set inlineWidth for a compact width. Multiline controls (<tng-textarea> or textarea with tngTextarea / tngInput) use the same width and roughly twice the single-line control height.

What Form Field Does

  • Connects a projected label[tngLabel] to the compatible control.
  • Collects visible tngHint and tngError ids for aria-describedby.
  • Reflects focused, invalid, disabled, required, size, and label position state with data attributes.
  • Auto-adapts visual chrome and layout to the projected control (text input, switch, slider, listbox, datepicker …) — see appearance and controlType.

Supported controls

Any control projected as a child works. TailNG's text-shaped controls (tng-input, tng-textarea, tng-select, tng-multiselect, tng-autocomplete, tng-multi-autocomplete, tng-input-field, tng-datepicker) sit inside the standard outlined frame. Inline-shaped controls (tng-switch, tng-toggle, tng-checkbox) switch to plain appearance with the label trailing on the same row. Composite controls (tng-radio, tng-slider, tng-toggle-group, tng-listbox, tng-input-otp, tng-month-daypicker, tng-yearpicker) keep their own chrome inside a plain frame.

Auto-detection picks sensible defaults; set appearance or controlType on <tng-form-field> to override.

Basic Field

Use your work email.

Email is required.

Field with label, hint, and error

html
<tng-form-field>
  <tng-label forId="email">Email</tng-label>
  <tng-input id="email" type="email" placeholder="[email protected]" required />
  <p tngHint>Use your work email.</p>
  <p tngError>Email is required.</p>
</tng-form-field>

With Input Group

Use tng-input-field inside tng-form-field when the control needs prefix or suffix content.

Input group field (Plain-CSS)

$USD

Enter amount before tax.