mac-confirmation-code
Reactive icon

MAC Confirmation Code

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 01 January 2022 by 
5.0
 (1 rating)
mac-confirmation-code

MAC Confirmation Code

Details
Widget for confirmation code inputs with dynamic number of inputs to show to user.
Read more

Widget  for confirmation code for Reactive

Functionalities:

- Paste the code functionality.

- Can with keyboard events (Backspace).

- Only accept numbers on type and paste.

- Choose number of fields.

- Choose if confirmation code will trigger event only if all inputs is filled.

Easy to customize with CSS variables

.confirmation-code-container{
text-align: center;
--border-size: 1px;
--border-bottom-size: 3px;
--border-color: var(--color-neutral-6);
--border-color-valid: var(--color-success);
--border-color-focus: var(--color-info);
--border-color-hover: var(--color-info);
--border-color-valid: var(--color-success);
--input-background-color: var(--color-neutral-0);
--input-background-color-valid: var(--color-neutral-0);
--input-height: 60px;
--input-width: 50px;
--input-font-size: 28px;
--input-font-weight: 500;
--input-gap: 5px;
--input-border-radius: 6px;
}

.confirmation-code-wrapper-02 .confirmation-code-container{
--border-color-focus: var(--color-neutral-9);
--border-color-hover: var(--color-neutral-9);
--border-color-valid: var(--color-primary);
}

Release notes (1.0.1)

Widget  for confirmation code for Reactive

Functionalities:

- Paste the code functionality.

- Can with keyboard events (Backspace).

- Only accept numbers on type and paste.

- Choose number of fields.

- Choose if confirmation code will trigger event only if all inputs is filled.

Easy to customize with CSS variables

.confirmation-code-container{
text-align: center;
--border-size: 1px;
--border-bottom-size: 3px;
--border-color: var(--color-neutral-6);
--border-color-valid: var(--color-success);
--border-color-focus: var(--color-info);
--border-color-hover: var(--color-info);
--border-color-valid: var(--color-success);
--input-background-color: var(--color-neutral-0);
--input-background-color-valid: var(--color-neutral-0);
--input-height: 60px;
--input-width: 50px;
--input-font-size: 28px;
--input-font-weight: 500;
--input-gap: 5px;
--input-border-radius: 6px;
}

.confirmation-code-wrapper-02 .confirmation-code-container{
--border-color-focus: var(--color-neutral-9);
--border-color-hover: var(--color-neutral-9);
--border-color-valid: var(--color-primary);
}


Release 1.0.1

  • New listener to select text on focus.


Reviews (0)