Field Message
Field Messages describe the context of a form element
- Make sure the field message is close to the input field
- The field message's state (standard or error) should be visible at a glance
- Keep descriptors and error messages brief and easy to act on
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Standard Input
Invalid Message
Responsive Layout
As layouts adapt to larger screens and different window sizes, apply flexible container dimensions to text fields. Set minimum and maximum values for margins, padding, and container dimensions as layouts scale so that typography adjusts for better reading experiences.
Text fields can span the full width of the display on compact window sizes, but should be bounded by flexible margins or other containers on medium and expanded window sizes.
On this page
import { Field, FieldMessage } from '@cerberus-design/react'Usage
Invalid
Customizing
API
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeexport interface FieldMessageProps extends HTMLAttributes<HTMLParagraphElement> { id: string}
define function FieldMessage(props: FieldMessageProps): ReactNodeProps
The FieldMessage component accepts the same props as the small element except the id prop is required.
On this page
Use Cases
- Users should be able to:
- Receive and understand supporting text and error messages
Labeling Elements
If the UI text is correctly linked, assistive tech (such as a screenreader) will read the UI text followed by the component's role.
It can be useful to provide a descriptive identifier for the field message - like help:first_name - to help users navigate to the field message with assistive technology.
On this page