Site icon UnofficialSF

Tap into the Multiple Capabilities of the Lightning Input Screen Component

This is a a Flow-optimized version of the Lightning Input component, which includes the following input types:

checkbox | checkbox-button | color | date | datetime-local | email | month | number | password | radio | range | tel | time | toggle | url | week

A Swiss-Army Knife of a component, capable of serving as 10 different inputs. Here are just four:

How It Works

The component has two required attributs: type (possible values noted above) and label, which must be set in the Flow. There are also several type-specific attributes and validation attributes available (see here for full documentation)

value attribute captures the user’s input and can be used to set a Flow variable.

For checkboxes and radio buttons, setting the “Group Name” attribute in the Flow will tie the buttons together.

Attributes and Examples by Type

Custom Validation Parameters and Messages

The following validations can be set in the Flow to show default or custom messages:

max | maxlength | min | minlength | required | pattern

pattern usage

For type tel the pattern [0-9]{3}-[0-9]{3}-[0-9]{4} allows ‘415-555-1212′, but shows an error message for ’33-555-1212’.

To require a two digit country code, e.g., 01-678-910-1234, the pattern [0-9]{2}-[0-9]{3}-[0-9]{3}-[0-9]{4} could be used.

The following attributes can be set in the Flow to display custom validation messages:

msg: Toggle Active | msg: Toggle Inactive | err: Bad Input | err: Pattern Mismatch | err: Range Overflow | err: Range Underflow | err: Step Mismatch | err: Too Long | err: Type Mismatch | err: Value Missing |

By default the following messages are displayed when a validation set has failed.

These default messages can be overridden by setting the following attributes in the flow.

The following attributes control the text displayed beneath the toggle input in each of its states:


formatter usage

The formatter attribute can be set to the following for number input fields.


New Version 1.0 10/10/22 Production Sandbox

Original Version

Source Code

Exit mobile version
Skip to toolbar