Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.
Preview loads on approachPreview loads on approach
Exact source · field-status-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {FieldStatus} from '@astryxdesign/core/FieldStatus';
import {VStack} from '@astryxdesign/core/Layout';
export default function FieldStatusShowcase() {
return (
<VStack gap={4}>
<FieldStatus
type="error"
message="This field is required"
variant="detached"
/>
<FieldStatus
type="warning"
message="This username is already taken by another team"
variant="detached"
/>
<FieldStatus
type="success"
message="Your changes have been saved"
variant="detached"
/>
</VStack>
);
}
Usage
FieldStatus renders validation feedback for fields and field-like controls. Use it directly for custom controls that need the same error, warning, or success presentation as Field.
Use attached status below bordered inputs when the message belongs to that input.
Use detached status for controls like checkboxes, switches, and custom controls where overlap would be visually awkward.
