React

Form

A form is a group of elements used to collect information from a user. Related design guidelines: Forms

ExamplesPropsCSS Variables

Examples

Simple form

Please provide your full name
Copied to clipboard

Form (horizontal)

Please provide your full name
Copied to clipboard

Form (invalid)

Age has to be a number
Copied to clipboard

Props

ActionGroup Props

The ActionGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as ActionGroup content.
classNamestring''Additional classes added to the ActionGroup.
anyAdditional props are spread to the container <div>

Form Props

The Form component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as Form content.
classNamestring''Additional classes added to the Form.
isHorizontalboolfalseSets the Form to horizontal.
anyAdditional props are spread to the container <form>

FormGroup Props

The FormGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullAnything that can be rendered as FormGroup content.
classNamestring''Additional classes added to the FormGroup.
labelnodeundefinedLabel text before the field.
isRequiredboolfalseSets the FormGroup required.
isValidbooltrueSets the FormGroup isValid.
isInlineboolfalseSets the FormGroup isInline.
helperTextnodeundefinedHelper text after the field. It can be a simple text or an object.
helperTextInvalidnodeundefinedHelper text after the field when the field is isValid. It can be a simple text or an object.
fieldIdstringID of the included field. It has to be the same for proper working.
anyAdditional props are spread to the container <div>

CSS Variables

--pf-c-form--GridGapc_form_GridGap1.5rem
--pf-c-form__actions--MarginBottomc_form__actions_MarginBottomcalc(0.5rem * -1)
--pf-c-form__actions--MarginLeftc_form__actions_MarginLeftcalc(0.5rem * -1)
--pf-c-form__actions--MarginRightc_form__actions_MarginRightcalc(0.5rem * -1)
--pf-c-form__actions--MarginTopc_form__actions_MarginTopcalc(0.5rem * -1)
--pf-c-form__actions--child--MarginBottomc_form__actions_child_MarginBottom0.5rem
--pf-c-form__actions--child--MarginLeftc_form__actions_child_MarginLeft0.5rem
--pf-c-form__actions--child--MarginRightc_form__actions_child_MarginRight0.5rem
--pf-c-form__actions--child--MarginTopc_form__actions_child_MarginTop0.5rem
--pf-c-form__group--MarginLeftc_form__group_MarginLeft0.5rem
--pf-c-form__group--m-action--MarginTopc_form__group_m_action_MarginTop2rem
--pf-c-form__helper-text--Colorc_form__helper_text_Color#151515
--pf-c-form__helper-text--FontSizec_form__helper_text_FontSize0.875rem
--pf-c-form__helper-text--MarginTopc_form__helper_text_MarginTop0.25rem
--pf-c-form__label--Colorc_form__label_Color#72767b
--pf-c-form__label--FontSizec_form__label_FontSize0.875rem
--pf-c-form__label--FontWeightc_form__label_FontWeight400
--pf-c-form__label--LineHeightc_form__label_LineHeight1.3
--pf-c-form__label--PaddingBottomc_form__label_PaddingBottom0.5rem
--pf-c-form__label--PaddingTopc_form__label_PaddingTop0.5rem
--pf-c-form__label--m-disabled--Colorc_form__label_m_disabled_Color#72767b
--pf-c-form__label-required--Colorc_form__label_required_Color#c9190b
--pf-c-form__label-required--FontSizec_form__label_required_FontSize0.875rem
--pf-c-form__label-required--MarginLeftc_form__label_required_MarginLeft0.25rem
--pf-c-form--m-error--Colorc_form_m_error_Color#c9190b
--pf-c-form--m-horizontal--md__group--GridTemplateColumnsc_form_m_horizontal_md__group_GridTemplateColumns150px 1fr
--pf-c-form--m-inline--MarginRightc_form_m_inline_MarginRight1.5rem