Styling

React Forms defines the following classes for each component. Each class is prefixed with rf prefix.

Note

React Forms uses BEM syntax for CSS classes.

Form

.rf-Form

Form component.

.rf-Form--invalid

When form contains invalid value.

Field

.rf-Field

Field component.

.rf-Field__label

Field label.

.rf-Field--invalid

When field contains invalid value.

Fieldset

.rf-Fieldset

Fieldset component.

.rf-Fieldset__label

Fieldset label.

RepeatingFieldset

.rf-RepeatingFieldset

RepeatingFieldset component.

.rf-RepeatingFieldset__add

“Add new item” button.

.rf-RepeatingFieldset__remove

“Remove item” button.

.rf-RepeatingFieldset__item

Item in the repeating fieldset component.

.rf-RepeatingFieldset__label

Repeating fieldset label.

Label

.rf-Label

Label component (used by fields, fieldsets and repeating fieldsets).

.rf-Hint

Hint component (a part of a label).

Message

.rf-Message

Error message