@outbook/commons-form

Shared utilities, templates, and styles for form-related web components in the Outbook Toolkit.

Installation

npm install @outbook/commons-form

API Reference

JavaScript Utilities

renderDescription({ description, descriptionId, testId })

Renders a small informational notification alert (@outbook/webcomponents-notification-alert) if a description is provided.

• description: The text content to display.
• descriptionId: The ID to assign to the description element (for ARIA).
• testId: Optional test ID suffix.

renderError({ inputInvalid, validateMessage, literals, descriptionId, testId })

Renders a small error notification alert if inputInvalid is true.

• inputInvalid: Boolean indicating if the field is in an invalid state.
• validateMessage: Custom error message.
• literals: Object containing fallback validation strings (e.g., literals.validation.fieldMandatory).
• descriptionId: The ID to assign to the error element (for ARIA).
• testId: Optional test ID suffix.

isAttributeEnabled(value)

A helper function to determine if a boolean-like attribute is enabled. It returns true if the value is true, an empty string (boolean attribute presence), 'true', or 'disabled'.

SCSS Styles

The package provides a common SCSS mixin to ensure consistent styling across form components.

@mixin style()

Includes base styles for form elements, including:

• Variables for padding, colors (light/dark mode support), and borders.
• Styles for .form-element, .form-element__label, .form-element__input, and .form-element__description.
• States for .is-invalid and .is-disabled.

Usage:

@use '@outbook/commons-form/common-form' as common;

:host {
  @include common.style();
}

Dependencies

• @outbook/design-decisions: For measures and tokens.
• @outbook/colorful: For palette colors.
• @outbook/webcomponents-notification-alert: For rendering messages.
• lit: Peer dependency for templates.