Skip to content
PatternFly logo

Login page

A 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.

Examples

Basic

Basic screenshot

Show/hide password

Show/hide password screenshot

Customizing the header utilities

headerUtilities is a prop that can be customized to allow components to be placed into the header of the login page, likely for the user to take an action. The following example demonstrates the use of a Select component to display a list a languages.

With header utilities

With header utilities screenshot

Props

LoginPage

*required
NameTypeDefaultDescription
loginTitlerequiredstringTitle for the login main body header of the login page
backgroundImgAltstring''Attribute that specifies the alt text of the background image for the login page
backgroundImgSrcstring | BackgroundImageSrcMap''Attribute that specifies the URL of the background image for the login page
brandImgAltstring''Attribute that specifies the alt text of the brand image for the login page
brandImgSrcstring''Attribute that specifies the URL of the brand image for the login page
childrenReact.ReactNodenullAnything that can be rendered inside of the login page (e.g. <LoginPageForm>)
classNamestring''Additional classes added to the login page
footerListItemsReact.ReactNodenullItems rendered inside of the footer list component of the login page
footerListVariantsListVariant.inlineAdds list variant styles for the footer list component of the login page. The only current value is'inline'
forgotCredentialsReact.ReactNodenullContent rendered inside of login main footer band to display a forgot credentials link.
headerUtilitiesReact.ReactNodeHeader utilities for the login main body header of the login page
loginSubtitlestringSubtitle for the login main body header of the login page
signUpForAccountMessageReact.ReactNodenullContent rendered inside of login main footer band to display a sign up for account message
socialMediaLoginContentReact.ReactNodenullContent rendered inside of social media login footer section
textContentstring''Content rendered inside of the text component of the login page

Login

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the main section of the login layout
classNamestring''Additional classes added to the login layout
footerReact.ReactNodenullFooter component (e.g. <LoginFooter />)
headerReact.ReactNodenullHeader component (e.g. <LoginHeader />)

LoginForm

*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the login main body's form
helperTextReact.ReactNodenullContent displayed in the helper text component *
helperTextIconReact.ReactNodenullIcon displayed to the left in the helper text
hidePasswordAriaLabelstring'Hide password'Accessible label for the hide password button
isLoginButtonDisabledbooleanfalseFlag indicating if the login button is disabled
isRememberMeCheckedbooleanfalseFlag indicating if the remember me checkbox is checked.
isShowPasswordEnabledbooleanfalseFlag indicating if the user can toggle hiding the password
isValidPasswordbooleantrueFlag indicating if the password is valid
isValidUsernamebooleantrueFlag indicating if the username is valid
loginButtonLabelstring'Log In'Label for the log in button input
noAutoFocusbooleanfalseFlag to indicate if the first dropdown item should not gain initial focus
onChangePassword(value: string, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the password
onChangeRememberMe(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the remember me checkbox
onChangeUsername(value: string, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the username
onLoginButtonClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void() => undefined as anyFunction that is called when the login button is clicked
passwordLabelstring'Password'Label for the password input field
passwordValuestring''Value for the password
rememberMeLabelstring''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.
showHelperTextbooleanfalseFlag indicating the helper text is visible *
showPasswordAriaLabelstring'Show password'Accessible label for the show password button
usernameLabelstring'Username'Label for the username input field
usernameValuestring''Value for the username

LoginMainBody

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the login main body
classNamestring''Additional classes added to the login main body

LoginMainHeader

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the login main header
classNamestring''Additional classes added to the login main header
headerUtilitiesReact.ReactNodenullActions that render for the login main header
subtitlestring''Subtitle that contains the text, URL, and URL text for the login main header
titlestring''Title for the login main header

LoginHeader

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the header of the login layout
classNamestring''Additional classes added to the login header
headerBrandReact.ReactNodenullHeader brand component (e.g. <LoginHeader />)

LoginFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer of the login layout
classNamestring''Additional props are spread to the container <footer>

LoginMainFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the login main footer
classNamestring''Additional classes added to the login main footer
forgotCredentialsReact.ReactNodenullContent rendered inside of login main footer band do display a forgot credentials link*
signUpForAccountMessageReact.ReactNodenullContent rendered inside of login main footer band to display a sign up for account message
socialMediaLoginContentReact.ReactNodenullContent rendered inside the login main footer as social media links*

LoginFooterItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer link item
classNamestringAdditional classes added to the footer link item
hrefstring'#'The URL of the footer link item
targetstring'_blank'Specifies where to open the linked document

LoginMainFooterBandItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer link item
classNamestring''Additional classes added to the footer link item

LoginMainFooterLinksItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer link item
classNamestring''Additional classes added to the footer link item
hrefstring''HREF for footer link item
linkComponentReact.ReactNode'a'Component used to render the footer link item
linkComponentPropsanyProps for the LinkComponent
targetstring''Target for footer link item

CSS variables

.pf-c-login__footer--pf-global--Color--100
#fff
.pf-c-login__footer--pf-global--Color--200
#f0f0f0
.pf-c-login__footer--pf-global--BorderColor--100
#b8bbbe
.pf-c-login__footer--pf-global--primary-color--100
#73bcf7
.pf-c-login__footer--pf-global--link--Color
#2b9af3
.pf-c-login__footer--pf-global--link--Color--hover
#2b9af3
.pf-c-login__footer--pf-global--BackgroundColor--100
#151515
.pf-c-login__footer .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-login__footer .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-login__footer .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-login--pf-c-login--PaddingTop
1.5rem
.pf-c-login--pf-c-login--PaddingBottom
1.5rem
.pf-c-login--pf-c-login--xl--BackgroundImage
none
.pf-c-login--pf-c-login__container--xl--GridColumnGap
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--pf-c-login__header--PaddingLeft
1rem
.pf-c-login--pf-c-login__header--PaddingRight
1rem
.pf-c-login--pf-c-login__header--xl--MarginBottom
3rem
.pf-c-login--pf-c-login__header--xl--MarginTop
4rem
.pf-c-login--pf-c-login__header--c-brand--MarginBottom
1.5rem
.pf-c-login--pf-c-login__header--c-brand--xl--MarginBottom
3rem
.pf-c-login--pf-c-login__main--BackgroundColor
#fff
.pf-c-login--pf-c-login__main--MarginBottom
1.5rem
.pf-c-login--pf-c-login__main-header--PaddingTop
3rem
.pf-c-login--pf-c-login__main-header--PaddingRight
2rem
.pf-c-login--pf-c-login__main-header--PaddingBottom
1rem
.pf-c-login--pf-c-login__main-header--PaddingLeft
2rem
.pf-c-login--pf-c-login__main-header--md--PaddingRight
3rem
.pf-c-login--pf-c-login__main-header--md--PaddingLeft
3rem
.pf-c-login--pf-c-login__main-header--ColumnGap
1rem
.pf-c-login--pf-c-login__main-header--RowGap
1rem
.pf-c-login--pf-c-login__main-header-desc--MarginBottom
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--pf-c-login__main-body--PaddingRight
2rem
.pf-c-login--pf-c-login__main-body--PaddingBottom
2rem
.pf-c-login--pf-c-login__main-body--PaddingLeft
2rem
.pf-c-login--pf-c-login__main-body--md--PaddingRight
3rem
.pf-c-login--pf-c-login__main-body--md--PaddingLeft
3rem
.pf-c-login--pf-c-login__main-footer--PaddingBottom
4rem
.pf-c-login--pf-c-login__main-footer--c-title--MarginBottom
1rem
.pf-c-login--pf-c-login__main-footer-links--PaddingTop
0.5rem
.pf-c-login--pf-c-login__main-footer-links--PaddingRight
4rem
.pf-c-login--pf-c-login__main-footer-links--PaddingBottom
2rem
.pf-c-login--pf-c-login__main-footer-links--PaddingLeft
4rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-links-item--PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-links-item--MarginBottom
0.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Fill
#6a6e73
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Width
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--Height
1.5rem
.pf-c-login--pf-c-login__main-footer-links-item-link-svg--hover--Fill
#151515
.pf-c-login--pf-c-login__main-footer-band--PaddingTop
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingRight
1rem
.pf-c-login--pf-c-login__main-footer-band--PaddingBottom
1.5rem
.pf-c-login--pf-c-login__main-footer-band--PaddingLeft
1rem
.pf-c-login--pf-c-login__main-footer-band--BackgroundColor
#f0f0f0
.pf-c-login--pf-c-login__main-footer-band-item--PaddingTop
1rem
.pf-c-login--pf-c-login__footer--PaddingLeft
1rem
.pf-c-login--pf-c-login__footer--PaddingRight
1rem
.pf-c-login--pf-c-login__footer--c-list--PaddingTop
1rem
.pf-c-login--pf-c-login__footer--c-list--xl--PaddingTop
3rem

View source on GitHub