Input Field

The Input Field is the right option if you need a written answer from people. This could be things such as name, address, job title, or favorite travel destination.

Video walkthrough of input field block.
Label and Placeholder
In the content column, edit the label as well as placeholder text which gives hints that describe the expected value of an input field. This could be something such as a name, address, job title, or favorite travel destination.
Edit Options
​
 
Option
name
Description
Block Preset
Select one of the block presets to easily set the edit options accordingly.
Sensitive
See Sensitive.
Autofocus
Determines that the field should be focussed when the screen first loads.
Autocomplete
Add predefined options for your users to choose from.
Required
Require the user to enter an answer before navigating.
Floating Label
The label first appears inside the field, and when interacted with, the label “floats” above, making room for the user to input a value.
Display info below input
Add additional information below the input field, such as letting people know when a field is optional.
Decorators
Add symbols and icons before or after an input field to inform people or take your design to the next level.
Mask
Adding a mask restricts the format of what can be inputted, like a credit card number or date.
Validation
Customize your error message, and have values such as emails validated on un-focus (when you click out of the field), or when the user attempts to navigate to the next screen.
Native 
Input Type
Native Input type determines the framework of an input field, such as a date or telephone number that has a specific layout. This is especially helpful on mobile: E.g., when you select 'tel' mobile users will not be shown the standard keyboard but the numbers pad. Also, if you select 'date', mobile users will see a native date selector. If a different input layout is shown depends on the device and its support of this functionality.
​

Building blocks - Previous

Multiple Choice

Next - Building blocks

Textarea

Last modified 1yr ago

Option name	Description
Block Preset	Select one of the block presets to easily set the edit options accordingly.
Sensitive	See Sensitive.
Autofocus	Determines that the field should be focussed when the screen first loads.
Autocomplete	Add predefined options for your users to choose from.
Required	Require the user to enter an answer before navigating.
Floating Label	The label first appears inside the field, and when interacted with, the label “floats” above, making room for the user to input a value.
Display info below input	Add additional information below the input field, such as letting people know when a field is optional.
Decorators	Add symbols and icons before or after an input field to inform people or take your design to the next level.
Mask	Adding a mask restricts the format of what can be inputted, like a credit card number or date.
Validation	Customize your error message, and have values such as emails validated on un-focus (when you click out of the field), or when the user attempts to navigate to the next screen.
Native Input Type	Native Input type determines the framework of an input field, such as a date or telephone number that has a specific layout. This is especially helpful on mobile: E.g., when you select 'tel' mobile users will not be shown the standard keyboard but the numbers pad. Also, if you select 'date', mobile users will see a native date selector. If a different input layout is shown depends on the device and its support of this functionality.