Design documented
The component is fully documented
React documented
Flutter documented
Design
Is the design finished and component available in Figma library?
Up to date
React
Is new design vision part implemented using new tokens?
Up to date
Flutter
Is new design vision part implemented using new tokens?
Up to date
Introduction
Fields enable users to enter data or select it from predefined options. They can be used to build Forms, settings screens, or as stand-alone components.
Selecting proper form components is crucial for a smooth form’s user experience. The component should always fit the purpose and allow the user to provide an answer as quickly as possible.
In MDS, we provide various fields, including text inputs, data inputs, and selects.
In code Field is a building block used to maintain consistency between multiple components.
Text Inputs
Inputs are free-form fields that require users to enter the data themselves. They should be used when predicting or offering alternative answers is impossible.
Chip Input*
Chip Input is used to collect multiple entries of the same format.
Password Input
Password Input allows users to enter private information as it masks the entered characters.
Textarea
Textarea allows users to enter longer, descriptive text, which could span multiple lines.
Text Input
Text Input allows users to enter short to medium length alphanumeric data.
Data Inputs
These components allow users to provide data in a specific format.
Date Picker
Date Picker allows users to select a singular date from a calendar or by entering dates manually.
Dropzone
Dropzone allows users to upload files from the computer.
Month Picker
Month Picker allows users to select a month without specifying the exact date.
Range Date Picker
Range Date Picker allows users to select a start and end date from a calendar or by entering dates manually.
Signature Input
Signature Input allows users to register finger or mouse motion as a graphical signature.
Stepper
Stepper allows users to enter a numeric value and incrementally adjust it.
Time Picker
Time Picker allows users to select a specific time.
Selection controls
Selection controls provide users with pre-defined options for easier and quicker data entry.
Search Input
Search Input allows users to select one of the options not provided to the front-end for performance optimization.
Select
Select allows users to choose one or more pre-defined options from a longer list.
*These components are part of B2B product workspace and therefore not part of the MDS Core library.
Fields are not the only components that can be used in Forms. Check out the Form Components page to see other components offered by the MDS.
Related components & guidelines