Inputs

Inputs can be out-of-the-box items like email, given name, etc., but they can also be custom input fields or custom user attributes. This section will generally cover the available configurations of inputs.

Design

Label

The label is the displayed input field's label; this can be configured to whatever you'd like or configured as empty to have no label.

Placeholder

The placeholder is the displayed input field's placeholder; this can be configured to whatever you'd like or configured as empty to have no placeholder. The placeholder will disappear as the user enters data into the input field.

Allow Copying Value

By toggling the Allow copying value field on the input configuration setting, a copy icon is visible and the content of the input field can be copied to clipboard. This way, input component can be configured to allow copying their value.

Behavior

Validation Regex

You can configure a regex pattern to match data within an input field. Configuring a regex for the input field can be helpful if you want to match a specific format, length, etc., of the input field.

For example, if you want to allow only characters and not numbers or special characters, you can configure the pattern with ^[A-Za-z]+$; this configuration will fail validation unless the given data is only characters a-z.

Pattern Validation Error Message

You can configure a custom validation error message to pair with the regex pattern to match data within an input field. When this is configured, the configured message will be displayed when field validation fails.

Minimum Length

The minimum length, in characters, that the input field must contain.

Minimum Length Validation Error Message

You can configure a custom validation error message to pair with the minimum length to match data within an input field. When this is configured, the configured message will be displayed when field validation fails.

Maximum Length

The maximum length, in characters, that the input field can contain.

Errors On Blur vs On Submission

On Submission

By default, flow components will be On Submission, which means that the error messages for invalid input will only show up once the user tries to submit the form. After submission, all associated errors will pop up under their respective fields. Whether you use On Blur or On Submission, the error will immediately disappear once the user enters valid input without submitting or clicking out of the field.

On Submission:

On Blur

Enabling On Blur means that when a user clicks out of an input field, the error message appears under the field if the input is invalid. On blur validation allows the user to fix their mistake immediately. To enable On Blur you pass the validateOnBlur prop as true in your Descope Component.

import { Descope } from '@descope/react-sdk'
 
const App = () => {
    return (
        {...}
        <Descope
            flowId="my-flow-id"
            onSuccess={(e) => console.log('Logged in!')}
            onError={(e) => console.log('Could not logged in')}
            validateOnBlur={true}
        />
    )
}

On Blur: