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