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

Simple login page

Login Page Example
Copied to clipboard

Props

Login Props

The Login component accepts the following props.

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 />)

LoginFooter Props

The LoginFooter component accepts the following props.

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

LoginFooterItem Props

The LoginFooterItem component accepts the following props.

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

LoginForm Props

The LoginForm component accepts the following props.

NameTypeRequiredDefaultDescription
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''

LoginHeader Props

The LoginHeader component accepts the following props.

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 />)

LoginMainBody Props

The LoginMainBody component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Login Main Body
classNamestring''Additional classes added to the Login Main Body

LoginMainFooter Props

The LoginMainFooter component accepts the following props.

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*

LoginMainFooterBandItem Props

The LoginMainFooterBandItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the footer Link Item
classNamestring''Additional classes added to the Footer Link Item

LoginMainFooterLinksItem Props

The LoginMainFooterLinksItem component accepts the following props.

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

LoginMainHeader Props

The LoginMainHeader component accepts the following props.

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

LoginPage Props

The LoginPage component accepts the following props.

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 .

CSS Variables

--pf-c-login--PaddingBottomc_login_PaddingBottom1.5rem
--pf-c-login--PaddingTopc_login_PaddingTop1.5rem
--pf-c-login__container--MaxWidthc_login__container_MaxWidth31.25rem
--pf-c-login__container--PaddingLeftc_login__container_PaddingLeft6.125rem
--pf-c-login__container--PaddingRightc_login__container_PaddingRight6.125rem
--pf-c-login__container--xl--GridColumnGapc_login__container_xl_GridColumnGap4rem
--pf-c-login__container--xl--GridTemplateColumnsc_login__container_xl_GridTemplateColumns34rem minmax(auto,34rem)
--pf-c-login__container--xl--MaxWidthc_login__container_xl_MaxWidthnone
--pf-c-login__footer--c-list--PaddingTopc_login__footer_c_list_PaddingTop1rem
--pf-c-login__footer--c-list--xl--PaddingTopc_login__footer_c_list_xl_PaddingTop3rem
--pf-c-login__footer--sm--PaddingLeftc_login__footer_sm_PaddingLeft1rem
--pf-c-login__footer--sm--PaddingRightc_login__footer_sm_PaddingRight1rem
--pf-c-login__header--MarginBottomc_login__header_MarginBottom1rem
--pf-c-login__header--c-brand--MarginBottomc_login__header_c_brand_MarginBottom1.5rem
--pf-c-login__header--c-brand--xl--MarginBottomc_login__header_c_brand_xl_MarginBottom3rem
--pf-c-login__header--sm--PaddingLeftc_login__header_sm_PaddingLeft1rem
--pf-c-login__header--sm--PaddingRightc_login__header_sm_PaddingRight1rem
--pf-c-login__header--xl--MarginBottomc_login__header_xl_MarginBottom3rem
--pf-c-login__header--xl--MarginTopc_login__header_xl_MarginTop4rem
--pf-c-login__main--BackgroundColorc_login__main_BackgroundColor#fff
--pf-c-login__main-body--PaddingBottomc_login__main_body_PaddingBottom2rem
--pf-c-login__main-body--PaddingLeftc_login__main_body_PaddingLeft2rem
--pf-c-login__main-body--PaddingRightc_login__main_body_PaddingRight2rem
--pf-c-login__main-body--c-form__helper-text-icon--FontSizec_login__main_body_c_form__helper_text_icon_FontSize1.125rem
--pf-c-login__main-body--c-form__helper-text-icon--MarginRightc_login__main_body_c_form__helper_text_icon_MarginRight0.5rem
--pf-c-login__main-body--md--PaddingLeftc_login__main_body_md_PaddingLeft3rem
--pf-c-login__main-body--md--PaddingRightc_login__main_body_md_PaddingRight3rem
--pf-c-login__main-footer--PaddingBottomc_login__main_footer_PaddingBottom4rem
--pf-c-login__main-footer-band--BackgroundColorc_login__main_footer_band_BackgroundColor#ededed
--pf-c-login__main-footer-band--PaddingBottomc_login__main_footer_band_PaddingBottom1.5rem
--pf-c-login__main-footer-band--PaddingLeftc_login__main_footer_band_PaddingLeft1rem
--pf-c-login__main-footer-band--PaddingRightc_login__main_footer_band_PaddingRight1rem
--pf-c-login__main-footer-band--PaddingTopc_login__main_footer_band_PaddingTop1.5rem
--pf-c-login__main-footer-band-item--PaddingTopc_login__main_footer_band_item_PaddingTop1rem
--pf-c-login__main-footer--c-title--MarginBottomc_login__main_footer_c_title_MarginBottom1rem
--pf-c-login__main-footer-links--PaddingBottomc_login__main_footer_links_PaddingBottom2rem
--pf-c-login__main-footer-links--PaddingLeftc_login__main_footer_links_PaddingLeft4rem
--pf-c-login__main-footer-links--PaddingRightc_login__main_footer_links_PaddingRight4rem
--pf-c-login__main-footer-links--PaddingTopc_login__main_footer_links_PaddingTop0.5rem
--pf-c-login__main-footer-links-item--MarginBottomc_login__main_footer_links_item_MarginBottom0.5rem
--pf-c-login__main-footer-links-item--PaddingLeftc_login__main_footer_links_item_PaddingLeft1rem
--pf-c-login__main-footer-links-item--PaddingRightc_login__main_footer_links_item_PaddingRight1rem
--pf-c-login__main-footer-links-item-link-svg--Fillc_login__main_footer_links_item_link_svg_Fill#72767b
--pf-c-login__main-footer-links-item-link-svg--Heightc_login__main_footer_links_item_link_svg_Height1.5rem
--pf-c-login__main-footer-links-item-link-svg--Widthc_login__main_footer_links_item_link_svg_Width1.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-header--ColumnGapc_login__main_header_ColumnGap1rem
--pf-c-login__main-header--PaddingBottomc_login__main_header_PaddingBottom1rem
--pf-c-login__main-header--PaddingLeftc_login__main_header_PaddingLeft2rem
--pf-c-login__main-header--PaddingRightc_login__main_header_PaddingRight2rem
--pf-c-login__main-header--PaddingTopc_login__main_header_PaddingTop3rem
--pf-c-login__main-header--RowGapc_login__main_header_RowGap1rem
--pf-c-login__main-header-desc--FontSizec_login__main_header_desc_FontSize0.875rem
--pf-c-login__main-header-desc--MarginBottomc_login__main_header_desc_MarginBottom0.5rem
--pf-c-login__main-header-desc--md--MarginBottomc_login__main_header_desc_md_MarginBottom0
--pf-c-login__main-header--md--PaddingLeftc_login__main_header_md_PaddingLeft3rem
--pf-c-login__main-header--md--PaddingRightc_login__main_header_md_PaddingRight3rem
--pf-c-login__main--xl--MarginBottomc_login__main_xl_MarginBottom1.5rem
--pf-c-login--xl--BackgroundImagec_login_xl_BackgroundImagelinear-gradient(90deg,rgba(3,3,3,.32),rgba(3,3,3,.32) calc((98px - 4rem) + 4rem + 272px),transparent calc((98px - 4rem) + 4rem + 272px))