React

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

ExamplesPropsCSS Variables

Examples

Basic

Props

LoginPage properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>)
classNamestring''Additional classes added to the LoginPage.
brandImgSrcstring''Attribute that specifies the URL of the brand image for the LoginPage
brandImgAltstring''Attribute that specifies the alt text of the brand image for the LoginPage.
backgroundImgSrcstring | BackgroundImageSrcMap''Attribute that specifies the URL of the background image for the LoginPage
backgroundImgAltstring''Attribute that specifies the alt text of the background image for the LoginPage.
textContentstring''Content rendered inside of the Text Component of the LoginPage
footerListItemsReact.ReactNodenullItems rendered inside of the Footer List Component of the LoginPage
footerListVariantsliteralAdds list variant styles for the Footer List component of the LoginPage. The only current value is'inline'
loginTitlestringTitle for the Login Main Body Header of the LoginPage
loginSubtitlestringSubtitle for the Login Main Body Header of the LoginPage
signUpForAccountMessageReact.ReactNodenullContent rendered inside of Login Main Footer Band to display a sign up for account message
forgotCredentialsReact.ReactNodenullContent rendered inside of Login Main Footer Band to display a forgot credentials link*
socialMediaLoginContentReact.ReactNodenullContent rendered inside of Social Media Login footer section .
Login properties
NameTypeRequiredDefaultDescription
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 properties
NameTypeRequiredDefaultDescription
noAutoFocusbooleanfalseFlag to indicate if the first dropdown item should not gain initial focus
classNamestring''Additional classes added to the Login Main Body's Form
showHelperTextbooleanfalseFlag indicating the Helper Text is visible *
helperTextReact.ReactNodenullContent displayed in the Helper Text component *
usernameLabelstring'Username'Label for the Username Input Field
usernameValuestring''Value for the Username
onChangeUsername(value: string, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the Username
isValidUsernamebooleantrueFlag indicating if the Username is valid
passwordLabelstring'Password'Label for the Password Input Field
passwordValuestring''Value for the Password
onChangePassword(value: string, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the Password
isValidPasswordbooleantrueFlag indicating if the Password is valid
loginButtonLabelstring'Log In'Label for the Log in Button Input
isLoginButtonDisabledbooleanfalseFlag indicating if the Login Button is disabled
onLoginButtonClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void() => undefined as anyFunction that is called when the Login button is clicked
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.
isRememberMeCheckedbooleanfalseFlag indicating if the remember me Checkbox is checked.
onChangeRememberMe(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyFunction that handles the onChange event for the Remember Me Checkbox
rememberMeAriaLabelstring''
LoginMainBody properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Login Main Body
classNamestring''Additional classes added to the Login Main Body
LoginMainHeader properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Login Main Header
classNamestring''Additional classes added to the Login Main Header
titlestring''Title for the Login Main Header
subtitlestring''Subtitle that contains the Text, URL, and URL Text for the Login Main Header
LoginHeader properties
NameTypeRequiredDefaultDescription
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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer of the login layout
classNamestring''Additional props are spread to the container <footer>
LoginMainFooter properties
NameTypeRequiredDefaultDescription
classNamestring''Additional classes added to the Login Main Footer
childrenReact.ReactNodenullContent rendered inside the Login Main Footer
socialMediaLoginContentReact.ReactNodenullContent rendered inside the Login Main Footer as Social Media Links*
signUpForAccountMessageReact.ReactNodenullContent rendered inside of Login Main Footer Band to display a sign up for account message
forgotCredentialsReact.ReactNodenullContent rendered inside of Login Main Footer Band do display a forgot credentials link*
LoginFooterItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer Link Item
classNamestring''Additional 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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer Link Item
classNamestring''Additional classes added to the Footer Link Item
LoginMainFooterLinksItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer Link Item
hrefstring''HREF for Footer Link Item
targetstring''Target for Footer Link Item
classNamestring''Additional classes added to the Footer Link Item
linkComponentReact.ReactNode'a'Component used to render the Footer Link Item

CSS Variables

--pf-c-login__container--MaxWidthc_login__container_MaxWidth
31.25rem
--pf-c-login__container--PaddingLeftc_login__container_PaddingLeft
6.125rem
--pf-c-login__container--PaddingRightc_login__container_PaddingRight
6.125rem
--pf-c-login__container--xl--GridColumnGapc_login__container_xl_GridColumnGap
4rem
--pf-c-login__container--xl--GridTemplateColumnsc_login__container_xl_GridTemplateColumns
34rem minmax(auto,34rem)
--pf-c-login__container--xl--MaxWidthc_login__container_xl_MaxWidth
none
--pf-c-login__footer--c-list--PaddingTopc_login__footer_c_list_PaddingTop
1rem
--pf-c-login__footer--c-list--xl--PaddingTopc_login__footer_c_list_xl_PaddingTop
3rem
--pf-c-login__footer--sm--PaddingLeftc_login__footer_sm_PaddingLeft
1rem
--pf-c-login__footer--sm--PaddingRightc_login__footer_sm_PaddingRight
1rem
--pf-c-login__header--c-brand--MarginBottomc_login__header_c_brand_MarginBottom
1.5rem
--pf-c-login__header--c-brand--xl--MarginBottomc_login__header_c_brand_xl_MarginBottom
3rem
--pf-c-login__header--MarginBottomc_login__header_MarginBottom
1rem
--pf-c-login__header--sm--PaddingLeftc_login__header_sm_PaddingLeft
1rem
--pf-c-login__header--sm--PaddingRightc_login__header_sm_PaddingRight
1rem
--pf-c-login__header--xl--MarginBottomc_login__header_xl_MarginBottom
3rem
--pf-c-login__header--xl--MarginTopc_login__header_xl_MarginTop
4rem
--pf-c-login__main--BackgroundColorc_login__main_BackgroundColor
#fff
--pf-c-login__main-body--c-form__helper-text-icon--FontSizec_login__main_body_c_form__helper_text_icon_FontSize
1.125rem
--pf-c-login__main-body--c-form__helper-text-icon--MarginRightc_login__main_body_c_form__helper_text_icon_MarginRight
0.5rem
--pf-c-login__main-body--md--PaddingLeftc_login__main_body_md_PaddingLeft
3rem
--pf-c-login__main-body--md--PaddingRightc_login__main_body_md_PaddingRight
3rem
--pf-c-login__main-body--PaddingBottomc_login__main_body_PaddingBottom
2rem
--pf-c-login__main-body--PaddingLeftc_login__main_body_PaddingLeft
2rem
--pf-c-login__main-body--PaddingRightc_login__main_body_PaddingRight
2rem
--pf-c-login__main-footer-band--BackgroundColorc_login__main_footer_band_BackgroundColor
#ededed
--pf-c-login__main-footer-band-item--PaddingTopc_login__main_footer_band_item_PaddingTop
1rem
--pf-c-login__main-footer-band--PaddingBottomc_login__main_footer_band_PaddingBottom
1.5rem
--pf-c-login__main-footer-band--PaddingLeftc_login__main_footer_band_PaddingLeft
1rem
--pf-c-login__main-footer-band--PaddingRightc_login__main_footer_band_PaddingRight
1rem
--pf-c-login__main-footer-band--PaddingTopc_login__main_footer_band_PaddingTop
1.5rem
--pf-c-login__main-footer--c-title--MarginBottomc_login__main_footer_c_title_MarginBottom
1rem
--pf-c-login__main-footer-links-item-link-svg--Fillc_login__main_footer_links_item_link_svg_Fill
#737679
--pf-c-login__main-footer-links-item-link-svg--Heightc_login__main_footer_links_item_link_svg_Height
1.5rem
--pf-c-login__main-footer-links-item-link-svg--hover--Fillc_login__main_footer_links_item_link_svg_hover_Fill
#151515
--pf-c-login__main-footer-links-item-link-svg--Widthc_login__main_footer_links_item_link_svg_Width
1.5rem
--pf-c-login__main-footer-links-item--MarginBottomc_login__main_footer_links_item_MarginBottom
0.5rem
--pf-c-login__main-footer-links-item--PaddingLeftc_login__main_footer_links_item_PaddingLeft
1rem
--pf-c-login__main-footer-links-item--PaddingRightc_login__main_footer_links_item_PaddingRight
1rem
--pf-c-login__main-footer-links--PaddingBottomc_login__main_footer_links_PaddingBottom
2rem
--pf-c-login__main-footer-links--PaddingLeftc_login__main_footer_links_PaddingLeft
4rem
--pf-c-login__main-footer-links--PaddingRightc_login__main_footer_links_PaddingRight
4rem
--pf-c-login__main-footer-links--PaddingTopc_login__main_footer_links_PaddingTop
0.5rem
--pf-c-login__main-footer--PaddingBottomc_login__main_footer_PaddingBottom
4rem
--pf-c-login__main-header--ColumnGapc_login__main_header_ColumnGap
1rem
--pf-c-login__main-header-desc--FontSizec_login__main_header_desc_FontSize
0.875rem
--pf-c-login__main-header-desc--MarginBottomc_login__main_header_desc_MarginBottom
0.5rem
--pf-c-login__main-header-desc--md--MarginBottomc_login__main_header_desc_md_MarginBottom
0
--pf-c-login__main-header--md--PaddingLeftc_login__main_header_md_PaddingLeft
3rem
--pf-c-login__main-header--md--PaddingRightc_login__main_header_md_PaddingRight
3rem
--pf-c-login__main-header--PaddingBottomc_login__main_header_PaddingBottom
1rem
--pf-c-login__main-header--PaddingLeftc_login__main_header_PaddingLeft
2rem
--pf-c-login__main-header--PaddingRightc_login__main_header_PaddingRight
2rem
--pf-c-login__main-header--PaddingTopc_login__main_header_PaddingTop
3rem
--pf-c-login__main-header--RowGapc_login__main_header_RowGap
1rem
--pf-c-login__main--xl--MarginBottomc_login__main_xl_MarginBottom
1.5rem
--pf-c-login--PaddingBottomc_login_PaddingBottom
1.5rem
--pf-c-login--PaddingTopc_login_PaddingTop
1.5rem
--pf-c-login--xl--BackgroundImagec_login_xl_BackgroundImage
linear-gradient(90deg,rgba(3,3,3,0.32),rgba(3,3,3,0.32) calc(98px - 4rem + 4rem + 272px),transparent calc(98px - 4rem + 4rem + 272px))