Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Inline Message

Contextual feedback that sits inline in a form or content area. Same semantic color variants as alert but compact — icon + text only, no background fill.

Components Inline Message
feedback static
<arc-inline-message>

Overview

InlineMessage provides lightweight, contextual feedback directly within forms and content areas. It uses the same four semantic color variants as alert — info, success, warning, and error — but with a much more compact presentation: just an icon and text, with no background fill, border, or padding. This minimal treatment makes inline-message ideal for form field validation hints, helper text with semantic meaning, and contextual notes that should not dominate the visual hierarchy. The icon provides at-a-glance severity recognition while the text delivers the specific guidance. Unlike alert, inline-message is not dismissible and has no interactive behavior — it is a pure display component that appears and disappears based on the state of the surrounding content. Place it directly below a form field to show validation feedback, or inline within a paragraph to add a contextual note.

Guidelines

When to use

  • Use inline-message for form field validation feedback directly below the input
  • Use the error variant for validation failures and success for confirmed valid fields
  • Keep messages short — one sentence that tells the user how to fix the issue
  • Place inline-message immediately after the related element for clear association
  • Use the info variant for neutral helper text with a hint icon

When not to use

  • Do not use inline-message for global or page-level notifications — use alert or banner instead
  • Do not Stack multiple inline-messages below a single field — consolidate into one message
  • Do not use inline-message as a replacement for required-field indicators
  • Do not rely solely on color to convey meaning — the icon and text must be self-explanatory
  • Do not use inline-message for success confirmations after form submission — use toast instead

Features

  • Four semantic variants (info, success, warning, error) with matching icons and text colors
  • Compact icon + text layout with no background fill or border
  • Inline display for seamless integration within forms and content
  • Automatic icon selection based on variant
  • Accessible — uses `role="status"` for dynamic messages
  • Lightweight — no padding, background, or border to minimize visual footprint
  • Inherits font size from parent for consistent typography

Preview

This field accepts email addresses only. Email address is valid. This email is already associated with another account. Please enter a valid email address.

Usage

<arc-inline-message variant="info">
  This field accepts email addresses only.
</arc-inline-message>

<arc-inline-message variant="error">
  Please enter a valid email address.
</arc-inline-message>
 
import { InlineMessage } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <InlineMessage variant="info">
        This field accepts email addresses only.
      </InlineMessage>

      <InlineMessage variant="error">
        Please enter a valid email address.
      </InlineMessage>
    </>
  );
}
 
<script setup>
import { InlineMessage } from '@arclux/arc-ui-vue';
</script>

<template>
  <InlineMessage variant="info">
    This field accepts email addresses only.
  </InlineMessage>
  <InlineMessage variant="error">
    Please enter a valid email address.
  </InlineMessage>
</template>
 
<script>
  import { InlineMessage } from '@arclux/arc-ui-svelte';
</script>

<InlineMessage variant="info">
  This field accepts email addresses only.
</InlineMessage>

<InlineMessage variant="error">
  Please enter a valid email address.
</InlineMessage>
 
import { Component } from '@angular/core';
import { InlineMessage } from '@arclux/arc-ui-angular';

@Component({
  imports: [InlineMessage],
  template: `
    <arc-inline-message variant="info">
      This field accepts email addresses only.
    </arc-inline-message>
    <arc-inline-message variant="error">
      Please enter a valid email address.
    </arc-inline-message>
  `,
})
export class MyComponent {}
 
import { InlineMessage } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <InlineMessage variant="info">
        This field accepts email addresses only.
      </InlineMessage>

      <InlineMessage variant="error">
        Please enter a valid email address.
      </InlineMessage>
    </>
  );
}
 
import { InlineMessage } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <InlineMessage variant="info">
        This field accepts email addresses only.
      </InlineMessage>

      <InlineMessage variant="error">
        Please enter a valid email address.
      </InlineMessage>
    </>
  );
}
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-inline-message — requires inline-message.css + base.css (or arc-ui.css) -->
<div class="arc-inline-message">
  <span class="inline-message__icon" aria-hidden="true">InlineMessage</span>
  <span class="inline-message__content">InlineMessage</span>
</div>
 
<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-inline-message — self-contained, no external CSS needed -->
<div class="arc-inline-message" style="display: flex; align-items: flex-start; gap: 4px">
  <span style="color: var(--_status-color); flex-shrink: 0; font-size: 16px; line-height: 1.6" aria-hidden="true">InlineMessage</span>
  <span style="font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 16px; color: rgb(165, 170, 203); line-height: 1.6">InlineMessage</span>
</div>

API

variant 'info' | 'success' | 'warning' | 'error' 'info'
Controls the icon and text color. Use "info" for neutral hints, "success" for valid state feedback, "warning" for caution notes, and "error" for validation failures.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy