Inline Message

Components

Inline Message

feedback

static

<arc-inline-message>

Overview

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

Use inline-message for global or page-level notifications — use alert or banner instead
Stack multiple inline-messages below a single field — consolidate into one message
Use inline-message as a replacement for required-field indicators
Rely solely on colour to convey meaning — the icon and text must be self-explanatory
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 colours
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';

<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: `
    <InlineMessage variant="info">
      This field accepts email addresses only.
    </InlineMessage>
    <InlineMessage variant="error">
      Please enter a valid email address.
    </InlineMessage>
  `,
})
export class MyComponent {}

import { InlineMessage } from '@arclux/arc-ui-solid';

<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';

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

<InlineMessage variant="error">
  Please enter a valid email address.
</InlineMessage>

<!-- See HTML tab after running pnpm generate -->
<div class="arc-inline-message" data-variant="info">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-inline-message" style="...">...</div>

API

Prop	Type	Default	Description
`variant`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	Controls the icon and text colour. Use "info" for neutral hints, "success" for valid state feedback, "warning" for caution notes, and "error" for validation failures.