LoginPage
Examples
Simple LoginPage
This example can only be accessed in full page mode.
LoginPage Props
The LoginPage component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>) | |
| className | string | '' | Additional classes added to the LoginPage. | |
| brandImgSrc | string | '' | Attribute that specifies the URL of the brand image for the LoginPage | |
| brandImgAlt | string | '' | Attribute that specifies the alt text of the brand image for the LoginPage. | |
| backgroundImgSrc | string | '' | Attribute that specifies the URL of the background image for the LoginPage | |
| backgroundImgAlt | string | '' | Attribute that specifies the alt text of the background image for the LoginPage. | |
| textContent | string | '' | Content rendered inside of the Text Component of the LoginPage | |
| footerListItems | node | null | Items rendered inside of the Footer List Component of the LoginPage | |
| footerListVariants | enum | null | Adds list variant styles for the Footer List component of the LoginPage. Values are 'grid' or 'inline' | |
| languageSelector | node | null | Language dropdown component for the Login Main Body Header of the LoginPage | |
| loginTitle | string | Title for the Login Main Body Header of the LoginPage | ||
| signUpForAccountMessage | node | null | Login message that contains the Text, URL, and URL Text for the sign up for an account Login Message | |
| socialMediaLoginContent | node | null | Content rendered inside of Social Media Login footer section . |
LoginForm Props
The LoginForm component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | '' | Additional classes added to the Login Main Body's Form | |
| usernameLabel | string | 'Username' | Label for the Username Input Field | |
| usernameValue | string | '' | Value for the Username | |
| onChangeUsername | func | () => undefined | Function that handles the onChange event for the Username | |
| usernameHelperText | string | '' | Helper Text for the Username Input Field | |
| usernameHelperTextInvalid | string | '' | Helper Text for the Username Input Field when it is invalid | |
| isValidUsername | bool | true | Flag indicating if the Username is valid | |
| passwordLabel | string | 'Password' | Label for the Password Input Field | |
| passwordValue | string | '' | Value for the Password | |
| onChangePassword | func | () => undefined | Function that handles the onChange event for the Password | |
| passwordHelperText | string | '' | Helper Text for the Password Input Field | |
| passwordHelperTextInvalid | string | '' | Helper Text for the Password Input Field when it is invalid | |
| isValidPassword | bool | true | Flag indicating if the Password is valid | |
| loginButtonLabel | string | 'Log In' | Label for the Log in Button Input | |
| isLoginButtonDisabled | bool | false | Flag indicating if the Login Button is disabled | |
| onLoginButtonClick | func | () => undefined | Function that is called when the Login button is clicked | |
| rememberMeLabel | string | '' | Label for the Remember Me Checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show. | |
| isRememberMeChecked | bool | false | Flag indicating if the remember me Checkbox is checked. | |
| onChangeRememberMe | func | () => undefined | Function that handles the onChange event for the Remember Me Checkbox | |
| rememberMeAriaLabel | custom | '' | Aria Label for the Remember me checkbox |