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

Copied to clipboard

Form (horizontal)

Copied to clipboard

Form (invalid)

Copied to clipboard

Props

ActionGroup Props

The ActionGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as ActionGroup content.
classNamestring''Additional classes added to the ActionGroup.

Form Props

The Form component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as Form content.
classNamestring''Additional classes added to the Form.
isHorizontalbooleanfalseSets the Form to horizontal.

FormGroup Props

The FormGroup component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullAnything that can be rendered as FormGroup content.
classNamestring''Additional classes added to the FormGroup.
labelReact.ReactNodeLabel text before the field.
isRequiredbooleanfalseSets the FormGroup required.
isValidbooleantrueSets the FormGroup isValid.
isInlinebooleanfalseSets the FormGroup isInline.
helperTextReact.ReactNodeHelper text after the field. It can be a simple text or an object.
helperTextInvalidReact.ReactNodeHelper 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.

FormHelperText Props

The FormHelperText component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Helper Text Item
isErrorbooleanfalseAdds error styling to the Helper Text *
isHiddenbooleantrueHides the helper text *
classNamestring''Additional classes added to the Helper Text Item

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#737679
--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#737679
--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__label-text--FontWeightc_form__label_text_FontWeight700
--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