Skip to content
Patternfly Logo

Login page

Examples

Basic

Show/hide password

Props

LoginPage

NameTypeRequiredDefaultDescription
backgroundImgAltstringNo''Attribute that specifies the alt text of the background image for the LoginPage.
backgroundImgSrcstring | BackgroundImageSrcMapNo''Attribute that specifies the URL of the background image for the LoginPage
brandImgAltstringNo''Attribute that specifies the alt text of the brand image for the LoginPage.
brandImgSrcstringNo''Attribute that specifies the URL of the brand image for the LoginPage
childrenReact.ReactNodeNonullAnything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>)
classNamestringNo''Additional classes added to the LoginPage.
footerListItemsReact.ReactNodeNonullItems rendered inside of the Footer List Component of the LoginPage
footerListVariantsListVariant.inlineNoAdds list variant styles for the Footer List component of the LoginPage. The only current value is'inline'
forgotCredentialsReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a forgot credentials link*
loginSubtitlestringNoSubtitle for the Login Main Body Header of the LoginPage
loginTitlestringYesTitle for the Login Main Body Header of the LoginPage
signUpForAccountMessageReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a sign up for account message
socialMediaLoginContentReact.ReactNodeNonullContent rendered inside of Social Media Login footer section .
textContentstringNo''Content rendered inside of the Text Component of the LoginPage

Login

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the main section of the login layout
classNamestringNo''Additional classes added to the login layout
footerReact.ReactNodeNonullFooter component (e.g. <LoginFooter />)
headerReact.ReactNodeNonullHeader component (e.g. <LoginHeader />)

LoginForm

NameTypeRequiredDefaultDescription
classNamestringNo''Additional classes added to the Login Main Body's Form
helperTextReact.ReactNodeNonullContent displayed in the Helper Text component *
helperTextIconReact.ReactNodeNonullIcon displayed to the left in the Helper Text
hidePasswordAriaLabelstringNo'Hide password'Accessible label for the hide password button
isLoginButtonDisabledbooleanNofalseFlag indicating if the Login Button is disabled
isRememberMeCheckedbooleanNofalseFlag indicating if the remember me Checkbox is checked.
isShowPasswordEnabledbooleanNofalseFlag indicating if the user can toggle hiding the password
isValidPasswordbooleanNotrueFlag indicating if the Password is valid
isValidUsernamebooleanNotrueFlag indicating if the Username is valid
loginButtonLabelstringNo'Log In'Label for the Log in Button Input
noAutoFocusbooleanNofalseFlag to indicate if the first dropdown item should not gain initial focus
onChangePassword(value: string, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Password
onChangeRememberMe(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Remember Me Checkbox
onChangeUsername(value: string, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyFunction that handles the onChange event for the Username
onLoginButtonClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => voidNo() => undefined as anyFunction that is called when the Login button is clicked
passwordLabelstringNo'Password'Label for the Password Input Field
passwordValuestringNo''Value for the Password
rememberMeLabelstringNo''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.
showHelperTextbooleanNofalseFlag indicating the Helper Text is visible *
showPasswordAriaLabelstringNo'Show password'Accessible label for the show password button
usernameLabelstringNo'Username'Label for the Username Input Field
usernameValuestringNo''Value for the Username

LoginMainBody

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Body
classNamestringNo''Additional classes added to the Login Main Body

LoginMainHeader

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Header
classNamestringNo''Additional classes added to the Login Main Header
subtitlestringNo''Subtitle that contains the Text, URL, and URL Text for the Login Main Header
titlestringNo''Title for the Login Main Header

LoginHeader

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the header of the login layout
classNamestringNo''Additional classes added to the login header
headerBrandReact.ReactNodeNonullHeader Brand component (e.g. <LoginHeader />)

LoginFooter

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer of the login layout
classNamestringNo''Additional props are spread to the container <footer>

LoginMainFooter

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the Login Main Footer
classNamestringNo''Additional classes added to the Login Main Footer
forgotCredentialsReact.ReactNodeNonullContent rendered inside of Login Main Footer Band do display a forgot credentials link*
signUpForAccountMessageReact.ReactNodeNonullContent rendered inside of Login Main Footer Band to display a sign up for account message
socialMediaLoginContentReact.ReactNodeNonullContent rendered inside the Login Main Footer as Social Media Links*

LoginFooterItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item
hrefstringNo'#'The URL of the Footer Link Item
targetstringNo'_blank'Specifies where to open the linked document

LoginMainFooterBandItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item

LoginMainFooterLinksItem

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered inside the footer Link Item
classNamestringNo''Additional classes added to the Footer Link Item
hrefstringNo''HREF for Footer Link Item
linkComponentReact.ReactNodeNo'a'Component used to render the Footer Link Item
linkComponentPropsanyNoProps for the LinkComponent
targetstringNo''Target for Footer Link Item

CSS variables

.pf-c-login__header--pf-global--Color--100
#fff
.pf-c-login__header--pf-global--Color--200
#f0f0f0
.pf-c-login__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-login__header--pf-global--primary-color--100
#73bcf7
.pf-c-login__header--pf-global--link--Color
#2b9af3
.pf-c-login__header--pf-global--link--Color--hover
#2b9af3
.pf-c-login__header--pf-global--BackgroundColor--100
#151515
.pf-c-login__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-login__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-login__header .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