Input Preview
An input allows people to enter short, free-form text data.
If you need to collect more than one line of information, try a textarea.
Resources
Behavior
Masks
Inputs can be masked or have custom type attributes that will affect their formatting. Input masking can work like placeholder text to help people enter data in a specific format, like a phone number with hyphens at particular intervals.
Fluent doesn’t currently apply custom styling to masked inputs and some input types may trigger browser-based formats that don’t align with Fluent’s design language.
Layout
Inputs can appear standalone, as full-width block elements, or inline with text. The width of the input should fit the approximate length of the content that you expect people to enter.
Accessibility
Avoid using placeholder text for essential information that people will need to complete the input. If you do include placeholder text, be sure it is 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
Placeholder text
You can use placeholder text to give a short, supplementary hint, or an example of formatting for the expected input value. It should guide people toward how to provide data if it’s not intuitive from the 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.
Don’t use placeholder text for essential information, which should appear either in the label or in helper text below the input, so it’s always visible. If you do include placeholder text, be sure it is combined with a label. See the field component for more info.
