--- title: Field isExperimentalPackage: false ---
---
title: Field
isExperimentalPackage: false
---
Using context, the field component connects the label, description, and message
to the input element.
``jsx live`
Each field must be accompanied by a label. Effective form labeling helps users
understand what information to enter into an input.
Using placeholder text in lieu of a label is sometimes employed as a
space-saving method. However, this is not recommended because it hides context
and presents accessibility issues.
`jsx live`
#### Label visibility
The label must always be provided for assistive technology, but you may hide it
from sighted users when the intent can be inferred from context.
`jsx live`
#### Secondary label
Provide additional context, typically used to indicate that the field is
optional.
`jsx live`
Optionally provide a utility or contextual hint, related to the field.
`jsx live`
adornment={
}
>
Provides pertinent information that assists the user in completing a field.
Description text is always visible and appears underneath the label. Use
sentence-style capitalisation, and in most cases, write the text as full
sentences with punctuation.
`jsx live`
description="We take your privacy seriously. We will never give your email to a third party."
>
The “message” is used to communicate the status of a field, such as an error
message. This will be announced on focus and can be combined with a “tone” to
illustrate intent.
`jsx live`
Mark the field as disabled by passing true to the disabled prop.
`jsx live``
[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1