Styling
=======

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

.. note::
  :class: inline

  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

.. _BEM: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/