ABBA UIv0.1.0
Forms

FormMessage

Helper, error or confirmation text.

Server-renderable1 export

Usually rendered by FormField, which also wires the `aria-describedby` relationship. Exported separately for forms built by hand.

Import

import { FormMessage } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/form-message.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Tones

Use your work address.

Looks good.

<Stack gap={2}>
  <FormMessage>Use your work address.</FormMessage>
  <FormMessage tone="error">This field is required.</FormMessage>
  <FormMessage tone="success">Looks good.</FormMessage>
</Stack>

Props

FormMessage props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
tone"description" | "error" | "success""description"Meaning of the message.
livebooleanAnnounce the message as it appears. Defaults to true for the error tone.

Accessibility

  • Errors are live by default: a validation failure shown only visually is invisible to a screen-reader user who has moved past the field.
  • Descriptions are not live, so they do not interrupt while typing.