Login

Overview

The Login Widget is a simple login form for the users to login to a particular service. the widget makes it easy to create custom login page.

login_overview

Options

Login

  • Show Label : Enable the toggle to show label in the login form.
  • Size : Set the size of login label.
  • Remember Me : Enable the toggle to show remember me checkbox in the login form.
  • Lost your password : Enable the toggle to show lost your password link in the login form.
  • Custom Label : Enable the toggle to show custom labels in the login form.
  • Custom Label for Username: Set the custom label name to username in login form.
  • Custom Placeholder for login: Set the custom placeholder name in login form.
  • Custom Label for password: Set the custom label name to password in login form.
  • Custom Placeholder for Password: Set the custom placeholder name for password in login form.
  • Redirect on Login : Enable the toggle to redirect to a different page after successful login.
  • Login Redirect URL : Set the link to which page is to be redirected after successful login.
  • Redirect on Logout : Enable the toggle to redirect to a different page after successful logout.
  • Logout Redirect URL : Set the link to which page is to be redirected after successful logou.
login_login

Form

  • Spacing : Set the bottom space between input form and button.
  • Link Color : Set the color of link (Lost your password?)
  • Link Color Hover: Set the color of link (Lost your password?) on hover.
login_form

Label

  • Spacing : Set the space between labels.
  • Text Color : Set the color of label text.
  • Typography : Choose the Font-name, size, boldness, text-decoration, letter-spacing.
login_label

Fields

  • Text Color : Set the color of input text.
  • Typography : Choose the Font-name, size, boldness, text-decoration, letter-spacing.
  • Background Color : Set the background color of input field.
  • Border Color : Set the color of border.
  • Border Width : Set the width of border.
  • Border Radius : Set the radius curve of the border.
login_fields

Button

  • Text : Insert the text to be displayed on button.
  • Alignment : Choose the alignment of the button viz. Left, Right, Center or Stretch.
  • Type : Choose the type of button you want to display viz. Primary, Secondary, etc.
  • Size : Choose the size of button you want to display. viz. Mini, Small, Large, etc.
  • State : Choose the state in which border is to be displayed viz Normal or Hover.
  • Border Type : Choose the type of border you want to display viz. Solid, Dashed, Dotted, Double, Groove.
login_button
Was this helpful to you?