Field Preview
A field is a combination of a label and any form component, like an input or a select. Optionally, fields can also have info buttons, helper text, and validation states to give people clues about the information they need to enter.
Resources
Types
Fields can be used with any component that asks someone to enter information. For more information on which type of field is best for your use case, see the following pages:
Behavior
Validation
Fields have styles baked in to support inline feedback after validation. Validation states will change the visual presentation of the field, for example changing to a red border in the error state.
Validation states also allow for a validation message to guide people in how to move forward. Use the validationMessage prop to display a message describing the state. Validation messages have default icons but you can choose to override the default icon with validationMessageIcon.
Success
Warning
Error
Required entries
To let people know they have to fill in a field before they move on, use the required prop. Visually, a red asterisk will appear next to the label. Screen readers will also announce that field as required.
For forms where all fields are required, it’s unnecessary to add the required prop to every field. Instead, try a general instruction before the form begins to explain that all fields are required. If the form is for sign-in or sign-up with only two fields, like for username and password, no required indicator is necessary.
You can provide an additional signal that all fields are required by disabling the Save or Submit button until all fields are complete.
Disabled fields
If a field is disabled, only the form component will appear disabled. The label will remain in the enabled state so that it’s still perceivable to people who use assistive technologies. Any helper text or validation text that appeared before the form component became disabled will also remain enabled.
Layout
By default, field labels are top-aligned above the form component. This layout is best for quickly scanning a page and entering information.
Optionally, you can left align labels if space is limited and if fields are of a consistent type and width. Use caution when left aligning the labels as it can decrease readability.
Vertical alignment
Horizontal alignment
Accessibility
Avoid using placeholder text for essential information that people will need to complete the field. If you do include placeholder text, be sure it’s combined with a label. When someone focuses on the input, the placeholder disappears, and removing the prompt can make it difficult for some people, including those with cognitive impairments, to enter information.
Placeholder text must be associated with an aria-label for assistive technologies.
Content
Labels
Labels briefly describe what goes in the field. Usually, a short phrase works best. In some cases, a question format is needed; but otherwise, avoid full sentences or instructional text.
Use sentence-style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
Placeholder text
For fields that accept text entry, like inputs and textareas, don’t use placeholder text for essential information, which should appear either in the label or in helper text below the field, so it’s always visible.
Instead, use placeholder text for a short, supplementary hint, or description of the expected value. It should guide people toward how to fill in the field if it isn’t intuitive from the field label. For example, “Search for keywords, file names, or people” as placeholder text in a search box.
Skip the period in placeholder text. For more info, see Periods in the Microsoft Writing Style Guide.
Helper text
Helper text sits below a field and guides people on how to fill it in correctly. Use helper text to explain accepted values or required formats.
If you need several sentences to explain a field’s requirements, consider listing them as bullets.
Skip the period in helper text. For more info, see Periods in the Microsoft Writing Style Guide.
Validation messages
Use validation messages to guide people in how to move forward when their entry isn’t valid, or to confirm that the entry is valid. Keep these messages brief, and don’t include end punctuation unless you need multiple sentences.
Success
Warning
Error