Text Input

A text input module marked required for users, with placeholder input

Overview

Overview

A Text Input module allows you to add a standard HTML input field that allows for text input usually found in a form submission box.

TextInput Properties

Input Type Dropdown - String or Number Sets the input type requirement. An error will display if invalid input is submitted.

Text Validation Options

Is this field required? Checkbox, default disabled If enabled, guests will be required to toggle this switch on. If a guest attempts to submit the form without toggling it on, a default error message will be displayed.

Custom Required Message String This field can be used to customize the error message to be displayed if the switch for required field is not toggled on. Example: 'Please toggle this switch before proceeding.'

Min Length

Value Number Sets the minimum text character length required on a text input, this is common for passwords. Example: 9

Rule Error Message String Sets the error message displayed if the submitted text input does not meet the required min value. Example: 'This password does not meet the minimum length of 6 characters.'

Max Length

maxLength Number - 18 Sets the maximum text character length required on a text input.

Rule Error Message String Sets the error message displayed if the submitted text input is longer than the defined max value. Example: 'Your password can't be longer than 16 characters.'

Regex Pattern

Regex Pattern Regex A validation regular expression that can be passed to validate the text input. This is commonly used for email validation. See Regex for more information.

Rule Error Message String Sets the error message displayed if the input does not match the regexp. Example: 'This input field is invalid.'

Properties

Input Id String Sets the Id of the text input field, which can be referenced by other elements.

Input Label String Sets the label of the input field, displayed above the input field. Example: 'Your Email'

Input Placeholder String Sets the displayed placeholder text within the text input field. Example: '[e-mail]'

Style attribute String, css style property input Can apply additional CSS to customize the switch.