Login page

The login page allows a user to gain access to an application by entering their username and password or by authenticating using a social media login. Related design guideline: Login

Examples Props CSS Variables

Examples

Basic

Log in to your account

Please use your single sign-on LDAP credentials

Need an account? Sign up.

Forgot username or password?

Props

LoginPage properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>)
className	string	No	''	Additional classes added to the LoginPage.
brandImgSrc	string	No	''	Attribute that specifies the URL of the brand image for the LoginPage
brandImgAlt	string	No	''	Attribute that specifies the alt text of the brand image for the LoginPage.
backgroundImgSrc	string \| BackgroundImageSrcMap	No	''	Attribute that specifies the URL of the background image for the LoginPage
backgroundImgAlt	string	No	''	Attribute that specifies the alt text of the background image for the LoginPage.
textContent	string	No	''	Content rendered inside of the Text Component of the LoginPage
footerListItems	React.ReactNode	No	null	Items rendered inside of the Footer List Component of the LoginPage
footerListVariants	ListVariant.inline	No		Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline'
loginTitle	string	Yes		Title for the Login Main Body Header of the LoginPage
loginSubtitle	string	No		Subtitle for the Login Main Body Header of the LoginPage
signUpForAccountMessage	React.ReactNode	No	null	Content rendered inside of Login Main Footer Band to display a sign up for account message
forgotCredentials	React.ReactNode	No	null	Content rendered inside of Login Main Footer Band to display a forgot credentials link*
socialMediaLoginContent	React.ReactNode	No	null	Content rendered inside of Social Media Login footer section .

Login properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the main section of the login layout
className	string	No	''	Additional classes added to the login layout
footer	React.ReactNode	No	null	Footer component (e.g. <LoginFooter />)
header	React.ReactNode	No	null	Header component (e.g. <LoginHeader />)

LoginForm properties
Name	Type	Required	Default	Description
noAutoFocus	boolean	No	false	Flag to indicate if the first dropdown item should not gain initial focus
className	string	No	''	Additional classes added to the Login Main Body's Form
showHelperText	boolean	No	false	Flag indicating the Helper Text is visible *
helperText	React.ReactNode	No	null	Content displayed in the Helper Text component *
usernameLabel	string	No	'Username'	Label for the Username Input Field
usernameValue	string	No	''	Value for the Username
onChangeUsername	(value: string, event: React.FormEvent<HTMLInputElement>) => void	No	() => undefined as any	Function that handles the onChange event for the Username
isValidUsername	boolean	No	true	Flag indicating if the Username is valid
passwordLabel	string	No	'Password'	Label for the Password Input Field
passwordValue	string	No	''	Value for the Password
onChangePassword	(value: string, event: React.FormEvent<HTMLInputElement>) => void	No	() => undefined as any	Function that handles the onChange event for the Password
isValidPassword	boolean	No	true	Flag indicating if the Password is valid
loginButtonLabel	string	No	'Log In'	Label for the Log in Button Input
isLoginButtonDisabled	boolean	No	false	Flag indicating if the Login Button is disabled
onLoginButtonClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	No	() => undefined as any	Function that is called when the Login button is clicked
rememberMeLabel	string	No	''	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	boolean	No	false	Flag indicating if the remember me Checkbox is checked.
onChangeRememberMe	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void	No	() => undefined as any	Function that handles the onChange event for the Remember Me Checkbox

LoginMainBody properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Login Main Body
className	string	No	''	Additional classes added to the Login Main Body

LoginMainHeader properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the Login Main Header
className	string	No	''	Additional classes added to the Login Main Header
title	string	No	''	Title for the Login Main Header
subtitle	string	No	''	Subtitle that contains the Text, URL, and URL Text for the Login Main Header

LoginHeader properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the header of the login layout
className	string	No	''	Additional classes added to the login header
headerBrand	React.ReactNode	No	null	Header Brand component (e.g. <LoginHeader />)

LoginFooter properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the footer of the login layout
className	string	No	''	Additional props are spread to the container <footer>

LoginMainFooter properties
Name	Type	Required	Default	Description
className	string	No	''	Additional classes added to the Login Main Footer
children	React.ReactNode	No	null	Content rendered inside the Login Main Footer
socialMediaLoginContent	React.ReactNode	No	null	Content rendered inside the Login Main Footer as Social Media Links*
signUpForAccountMessage	React.ReactNode	No	null	Content rendered inside of Login Main Footer Band to display a sign up for account message
forgotCredentials	React.ReactNode	No	null	Content rendered inside of Login Main Footer Band do display a forgot credentials link*

LoginFooterItem properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the footer Link Item
className	string	No	''	Additional classes added to the Footer Link Item
href	string	No	'#'	The URL of the Footer Link Item
target	string	No	'_blank'	Specifies where to open the linked document

LoginMainFooterBandItem properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the footer Link Item
className	string	No	''	Additional classes added to the Footer Link Item

LoginMainFooterLinksItem properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Content rendered inside the footer Link Item
href	string	No	''	HREF for Footer Link Item
target	string	No	''	Target for Footer Link Item
className	string	No	''	Additional classes added to the Footer Link Item
linkComponent	React.ReactNode	No	'a'	Component used to render the Footer Link Item
linkComponentProps	any	No		Props for the LinkComponent

CSS Variables


	.pf-c-login__header	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-login__header	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-login__header	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-login__header	--pf-global--link--Color	#73bcf7
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-login__header	--pf-global--link--Color--hover	#73bcf7
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-login__header	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-login__header .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-login__header .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login__header .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-login	--pf-c-login--PaddingTop	1.5rem
--pf-c-login--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login--PaddingBottom	1.5rem
--pf-c-login--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login--xl--BackgroundImage	none
	.pf-c-login	--pf-c-login__container--xl--GridColumnGap	4rem
--pf-c-login__container--xl--GridColumnGap --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-login	--pf-c-login__container--MaxWidth	31.25rem
	.pf-c-login	--pf-c-login__container--xl--MaxWidth	none
	.pf-c-login	--pf-c-login__container--PaddingLeft	6.125rem
	.pf-c-login	--pf-c-login__container--PaddingRight	6.125rem
	.pf-c-login	--pf-c-login__container--xl--GridTemplateColumns	34rem minmax(auto, 34rem)
	.pf-c-login	--pf-c-login__header--MarginBottom	1rem
--pf-c-login__header--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__header--PaddingLeft	1rem
--pf-c-login__header--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__header--PaddingRight	1rem
--pf-c-login__header--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__header--xl--MarginBottom	3rem
--pf-c-login__header--xl--MarginBottom --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__header--xl--MarginTop	4rem
--pf-c-login__header--xl--MarginTop --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-login	--pf-c-login__header--c-brand--MarginBottom	1.5rem
--pf-c-login__header--c-brand--MarginBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__header--c-brand--xl--MarginBottom	3rem
--pf-c-login__header--c-brand--xl--MarginBottom --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main--BackgroundColor	#fff
--pf-c-login__main--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-login	--pf-c-login__main--MarginBottom	1.5rem
--pf-c-login__main--MarginBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__main-header--PaddingTop	3rem
--pf-c-login__main-header--PaddingTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main-header--PaddingRight	2rem
--pf-c-login__main-header--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-header--PaddingBottom	1rem
--pf-c-login__main-header--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-header--PaddingLeft	2rem
--pf-c-login__main-header--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-header--md--PaddingRight	3rem
--pf-c-login__main-header--md--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main-header--md--PaddingLeft	3rem
--pf-c-login__main-header--md--PaddingLeft --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main-header--ColumnGap	1rem
--pf-c-login__main-header--ColumnGap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-header--RowGap	1rem
--pf-c-login__main-header--RowGap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-header-desc--MarginBottom	0.5rem
--pf-c-login__main-header-desc--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-login	--pf-c-login__main-header-desc--md--MarginBottom	0
	.pf-c-login	--pf-c-login__main-header-desc--FontSize	0.875rem
--pf-c-login__main-header-desc--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-login	--pf-c-login__main-body--PaddingRight	2rem
--pf-c-login__main-body--PaddingRight --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-body--PaddingBottom	2rem
--pf-c-login__main-body--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-body--PaddingLeft	2rem
--pf-c-login__main-body--PaddingLeft --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-body--md--PaddingRight	3rem
--pf-c-login__main-body--md--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main-body--md--PaddingLeft	3rem
--pf-c-login__main-body--md--PaddingLeft --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-login	--pf-c-login__main-footer--PaddingBottom	4rem
--pf-c-login__main-footer--PaddingBottom --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-login	--pf-c-login__main-footer--c-title--MarginBottom	1rem
--pf-c-login__main-footer--c-title--MarginBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-footer-links--PaddingTop	0.5rem
--pf-c-login__main-footer-links--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-login	--pf-c-login__main-footer-links--PaddingRight	4rem
--pf-c-login__main-footer-links--PaddingRight --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-login	--pf-c-login__main-footer-links--PaddingBottom	2rem
--pf-c-login__main-footer-links--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-login	--pf-c-login__main-footer-links--PaddingLeft	4rem
--pf-c-login__main-footer-links--PaddingLeft --pf-global--spacer--3xl $pf-global--spacer--3xl pf-size-prem(64px) 4rem
	.pf-c-login	--pf-c-login__main-footer-links-item--PaddingRight	1rem
--pf-c-login__main-footer-links-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-footer-links-item--PaddingLeft	1rem
--pf-c-login__main-footer-links-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-footer-links-item--MarginBottom	0.5rem
--pf-c-login__main-footer-links-item--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-login	--pf-c-login__main-footer-links-item-link-svg--Fill	#6a6e73
--pf-c-login__main-footer-links-item-link-svg--Fill --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-login	--pf-c-login__main-footer-links-item-link-svg--Width	1.5rem
--pf-c-login__main-footer-links-item-link-svg--Width --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__main-footer-links-item-link-svg--Height	1.5rem
--pf-c-login__main-footer-links-item-link-svg--Height --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__main-footer-links-item-link-svg--hover--Fill	#151515
--pf-c-login__main-footer-links-item-link-svg--hover--Fill --pf-global--icon--Color--dark $pf-global--icon--Color--dark $pf-color-black-900 #151515
	.pf-c-login	--pf-c-login__main-footer-band--PaddingTop	1.5rem
--pf-c-login__main-footer-band--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__main-footer-band--PaddingRight	1rem
--pf-c-login__main-footer-band--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-footer-band--PaddingBottom	1.5rem
--pf-c-login__main-footer-band--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-login	--pf-c-login__main-footer-band--PaddingLeft	1rem
--pf-c-login__main-footer-band--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__main-footer-band--BackgroundColor	#f0f0f0
--pf-c-login__main-footer-band--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-login	--pf-c-login__main-footer-band-item--PaddingTop	1rem
--pf-c-login__main-footer-band-item--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__footer--PaddingLeft	1rem
--pf-c-login__footer--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__footer--PaddingRight	1rem
--pf-c-login__footer--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__footer--c-list--PaddingTop	1rem
--pf-c-login__footer--c-list--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-login	--pf-c-login__footer--c-list--xl--PaddingTop	3rem
--pf-c-login__footer--c-list--xl--PaddingTop --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem