Page layout — Input

Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:

Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area

Let’s take a look at the input component.

Input

The input component can be used to accept input from a user. Currently, supported inputs include text, Boolean values, date, password, and number.

We drag and drop the input component to a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.

Attributes
Key Value Description
dateTimeLocale {locale} By default, the input field for DateTime content types, displays using “en-us”. Other locales are supported. More here.
dateTimeFormat {format} By default the date picker (only enabled with DateTime content types) does not display the time or allow users to specify a time. When selecting a date the time component will default to “now”. More here.
minimum Number For number inputs, the minimum value that will be accepted.
maximum Number For number inputs, the maximum value that will be accepted.
step Number For number inputs, how much the number will increment / decrement by when the spinner arrows are clicked.
validation String Regular expression to test inputted value against.
validationMessage String Custom message to be displayed if validation regular expression fails.
mask String Format the inputted value must conform to.
autocomplete String Disable / enable autocomplete. Maps to the HTML5 autocomplete attribute.
useCurrent Boolean Specific to datetime inputs: Set to true to auto select the current date and time when the datetime picker is opened.
Goody bag
  1. Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=f5a1f08f-472b-4172-8d96-7e04a709e802
  2. Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/input.json
  3. Tutorial: Getting user input
  4. Tutorial: Building a form