Authenticator
Also known as: OTP input, 2FA input
Preview
Resources
Properties
Property | Values | Default |
---|---|---|
Variant Mode | Fill | Outline | Fill |
Size Variant | Sm | Md | Lg | Xl | Md |
State Variant | Default | Hover | Focus | Active | Error | Disabled | Default |
Label Text | string | Label |
Value Text | string | 9 |
Helper Boolean | true | false | false |
When to use
When two-factor authentication is required for the user to get access to the application, or when performing sensitive actions.
Confirming user email address or phone number during onboarding.
Automatically make the next field active after entering a value.
Provide real-time feedback on the field.
If the system supports a more seamless authentication method, such as biometric authentication.
Behaviour
Authenticator (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
State | Context |
---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Active | State that communicates that the user has taken action on the component. |
Error | Used when an invalid action occurs. Component may appear red or display helper, signaling an issue that needs resolution. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |
Length
The length of the authenticator is flexible. Depending on the type of code, slot amount can be adjusted between 4 and 6.
Helper component
Helper is a nested component and can optionally be shown below the textarea container. Use helper text if providing additional context about the form item (error message or hint). Keep the message concise and clear, optionally show an icon to support the message.
Property | Values | Default |
---|---|---|
Type Variant | Hint | Error | Hint |
Icon Boolean | true | false | true |
Label Text | string | Hint |