Messages

Inline messages provide contextual feedback directly next to form fields, inputs, or UI elements. Unlike alerts, messages are non-blocking and designed for field-level validation and hints.

When to Use

Messages are ideal for:

• Form validation feedback - Show errors next to specific fields
• Inline hints - Provide contextual help without disrupting flow
• Status indicators - Display connection or sync status
• Field-level errors - Highlight specific input problems
• Success confirmations - Confirm individual field submissions

Use Alerts instead when:

• The message needs to be dismissible
• It’s a system-wide notification
• The message requires user acknowledgment
• Multiple actions are available
• The message should persist across page navigation

Implementation

Messages come in four semantic variants:

<SemanticMessage variant="error" showIcon={true}>
	Invalid email format
</SemanticMessage>

<SemanticMessage variant="success" showIcon={true}>
	Email verified successfully
</SemanticMessage>

<SemanticMessage variant="warning" showIcon={true}>
	Password expires in 3 days
</SemanticMessage>

<SemanticMessage variant="info" showIcon={true}>
	This field is optional
</SemanticMessage>

Best Practices

Content Guidelines

• Keep it concise - Messages should be 1-2 sentences maximum
• Be specific - Tell users exactly what’s wrong and how to fix it
• Use plain language - Avoid technical jargon
• Provide solutions - Don’t just state the problem

Placement

• Next to the relevant field - Position messages immediately after the input
• Maintain visual hierarchy - Don’t let messages disrupt form layout
• Group related messages - Combine multiple errors for the same field
• Consider mobile - Ensure messages are visible on small screens

Timing

• Real-time validation - Show messages as users type (with debouncing)
• On blur - Validate when users leave a field
• On submit - Show all validation errors at once
• Success feedback - Confirm successful actions immediately

Accessibility

Messages are announced to screen readers using appropriate ARIA attributes:

• Error messages use role="alert" for immediate announcement
• Info and warning messages use aria-live="polite"
• Success messages are associated with form fields using aria-describedby

Examples

Form Validation

<label>
	Email
	<input type="email" bind:value={email} />
	{#if emailError}
		<SemanticMessage variant="error" showIcon={true}>
			{emailError}
		</SemanticMessage>
	{/if}
</label>

Status Indicators

<div class="status">
	<span>Connection Status:</span>
	<SemanticMessage variant="success">
		Connected
	</SemanticMessage>
</div>

Inline Help

<SemanticMessage variant="info" showIcon={true}>
	Passwords must contain at least 8 characters, including one uppercase letter and one number.
</SemanticMessage>