Skip to main content

Form Message

The form-message HTML element completes the form HTML element which represents a document section containing interactive controls for submitting information.

— Definition from the MDN web docs

Overview​

Common usage​

When to use Form Message?​

The form message is used when creating forms.

  • It is available in our normal control size ranges: small, standard, large.
    • The sizes define the typography with control.<size>.text
    • Icon size is also defined by control.<size>.icon.size.
    • Inline variants use specific top padding set by control.<size>tokens.
  • Text color is defined by the common text styles.
    • This allows the text to have importance levels, via the text.<importance>token
  • Icon color is set by feedback colors.

Properties​

Text​

The text property sets the form message's text to display. Icon sizes matching the text styles are also provided.

Loading...
Live Editor
<qds-form-message text="Form message"></qds-form-message>

Size​

The form message follows the transversal control size principles. Use the standard size unless you're in one of the specific contexts described on that page.

Loading...
Live Editor
<div className="qds-controls qds-related">
  <div className="qds-controls qds-related flex flex-row">
    <qds-label text="Standard size:"></qds-label>
    <qds-form-message text="Form message" size="standard"></qds-form-message>
  </div>
  <div className="qds-controls-large qds-related flex flex-row">
    <qds-label size="large" text="Large size:"></qds-label>
    <qds-form-message text="Form message" size="large"></qds-form-message>
  </div>
  <div className="qds-controls-small qds-related flex flex-row">
    <qds-label size="small" text="Small size:"></qds-label>
    <qds-form-message text="Form message" size="small"></qds-form-message>
  </div>
</div>

Status​

The status property sets the form's message status. Color styles are being used to reflect the various feedback displayed in the interface.

Loading...
Live Editor
<div className="qds-controls qds-related">
  <div className="qds-controls qds-related flex flex-row">
    <qds-label text="Error:"></qds-label>
    <qds-form-message text="Error message" status="error"></qds-form-message>
  </div>
  <div className="qds-controls qds-related flex flex-row">
    <qds-label text="Success:"></qds-label>
    <qds-form-message text="Success message" status="success"></qds-form-message>
  </div>
  <div className="qds-controls qds-related flex flex-row">
    <qds-label text="Info:"></qds-label>
    <qds-form-message text="Info message" status="info"></qds-form-message>
  </div>
  <div className="qds-controls-small qds-related flex flex-row">
    <qds-label text="Warning:"></qds-label>
    <qds-form-message text="Warning message" status="warning"></qds-form-message>
  </div>
</div>

Inline​

The inline property adds vertical margin to the form message for alignment. This is useful when creating inline layouts so that the first lines have the correct vertical centering.

Loading...
Live Editor
<div className="qds-controls flex-row">
  <qds-button text="Button"></qds-button>
  <qds-form-message text="Inline form message" size="standard" inline></qds-form-message>
</div>

Accessibility​

status-description​

Use the status-description attribute to give more context to screen readers when a form message icon is being used.

In the following example, this form message icon will be read by screen readers as "Error Password is required".

Loading...
Live Editor
<qds-form-message status-description="Error" text="Password is required."></qds-form-message>

Implementation tips​

Importing​

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsFormMessage } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsFormMessage()

Component reference​

Properties​

Attribute / PropertyTypeDescriptionDefault
inline
boolean

Adds vertical margin to the form message for alignment.

This is useful when creating inline layouts so that the first lines have the correct vertical centering.

false
size
"large" | "small" | "standard" | undefined

The form message's size.

'standard'
status
"error" | "info" | "success" | "warning" | undefined

The form message's status.

'error'
status-description / statusDescription
string | undefined

Adds accessible text to the icon's form message that will be used by screen readers.

undefined
text
string | undefined

The form message's text.

undefined
Last updated on