Forms Theming

To make forms theming easy and robust, form components have many theming options in common.

General naming convention for CSS custom properties looks as follows:

--rui-FormField--[<TYPE>]--[<MODIFICATION>]__[<ELEMENT>--[<ELEMENT TYPE]]--[<INTERACTION STATE>]__<PROPERTY>

Items in brackets are optional. As you read on you will notice some theming option groups may have less complicated conventions (that are still subset of the naming system above).

Basic Theming

The following theme options define basic appearance of all form fields.

Custom Property	Description
--rui-FormField__label__color	Label text color
--rui-FormField__label__font-size	Label font size
--rui-FormField__help-text__font-size	Help text font size
--rui-FormField__help-text__font-style	Help text font style, e.g. italic
--rui-FormField__help-text__color	Help text color

Horizontal Layout

Options for fields that support horizontal layout.

Custom Property	Description
--rui-FormField--horizontal__label__text-align	Text alignment of labels in horizontal layout
--rui-FormField--horizontal__label__min-width	Minimum width of labels in horizontal layout
--rui-FormField--horizontal__label__width	Default width of labels in horizontal layout
--rui-FormField--horizontal__label__padding-y	Top and bottom padding to tweak vertical alignment of labels
--rui-FormField--horizontal__label__vertical-alignment	Vertical box alignment of labels in horizontal layout
--rui-FormField--horizontal__field__vertical-alignment	Vertical box alignment of fields in horizontal layout
--rui-FormField--horizontal--full-width__label__width	Default width of labels in full-width horizontal layout

Box Fields

Options shared by box form controls. This includes TextField, TextArea, and SelectField.

Custom Property	Description
--rui-FormField--box__border-width	Control border width
--rui-FormField--box__border-radius	Control corner radius
--rui-FormField--box__input__width	Default text input and select box width
--rui-FormField--box__input__min-width	Minimum text input and select box width
--rui-FormField--box__placeholder__color	Placeholder text color

Example:

Box Field Variants

Theming options for box form controls. Naming convention looks as follows:

--rui-FormField--box--<VISUAL VARIANT>--<INTERACTION STATE>__<PROPERTY>

Where:

• <VISUAL VARIANT> is one of filled or outline,
• <INTERACTION STATE> is one of default, hover, focus, or disabled,
• <PROPERTY> is one of color, border-color, background, box-shadow, or surrounding-text-color (the last one being available only for default and disabled interaction states).

Example:

Box Field Sizes

Available sizes can be adjusted as follows:

--rui-FormField--box--<SIZE>__<PROPERTY>

Where:

• <SIZE> is one of small, medium, or large
• <PROPERTY> is one of height, padding-x, padding-y, or font-size

👉 Box field sizes are linked to Button sizes so they align nicely when placed in row.

Example:

Check Fields

Options shared by checkable form controls. This includes CheckboxField, Radio, and Toggle.

Custom Property	Description
--rui-FormField--check__input__size	Size of check inputs
--rui-FormField--check__input__border-width	Border width of check inputs
--rui-FormField--check__input--focus__box-shadow	Box shadow to highlight focused inputs
--rui-FormField--check__tap-target-size	Minimum tap target size

Interaction states:

Custom Property	Description
--rui-FormField--check--default__border-color	Border color of unchecked inputs
--rui-FormField--check--default__check-background-color	Background color of unchecked inputs
--rui-FormField--check--checked__border-color	Border color of checked inputs
--rui-FormField--check--checked__check-background-color	Background color of checked inputs
--rui-FormField--check--disabled__border-color	Border color of disabled unchecked inputs
--rui-FormField--check--disabled__check-background-color	Background color of disabled unchecked inputs
--rui-FormField--check--checked-disabled__border-color	Border color of disabled checked inputs
--rui-FormField--check--checked-disabled__check-background-color	Background color of disabled checked inputs

Example:

Validation States

Theming options for validation states are shared by all form components. Naming convention looks as follows:

--rui-FormField--<VALIDATION STATE>--<INTERACTION STATE>__<PROPERTY>

Where:

• <VALIDATION STATE> is one of invalid, valid, or warning
• <INTERACTION STATE> is one of default, checked, disabled, or checked-disabled
• <PROPERTY> is one of color, border-color, background, check-background-color, box-shadow, or surrounding-text-color

Not all properties are used by all components, this varies from component to component. Also, hover interaction state is unavailable for validation states everywhere — default state appearance is retained on hovering. For box fields, focus state for validation states is inherited from default form field appearance (i.e. as if no validation state was set).

Example:

Required State

Theming options for required fields are shared by all form components.

Custom Property	Description
--rui-FormField--required__label__color	Color of required input labels
--rui-FormField--required__sign	Text appended to required input labels
--rui-FormField--required__sign__color	Color of text appended to required input labels

👉 Please note that selected components can be rendered as required by setting the renderAsRequired prop to true. This is useful when --rui-FormField--required__label__color is used to indicate the required state of input fields, but you want to bypass it for inputs like feature toggles. This applies to CheckboxField, Radio, SelectField, and Toggle.

Disabled State

By default, all disabled form fields are semi-transparent and change mouse cursor on hover so users know the fields cannot be used.

Custom Property	Description
--rui-FormField--disabled__cursor	Cursor to show on hovering disabled form fields
--rui-FormField--disabled__opacity	Opacity of disabled form fields (inc. label and help text)

Should your design require custom styling of disabled fields, individual field types and validation states can be fine-tuned by several theming options available. All you need is to define all necessary custom properties following the naming conventions documented in previous sections (for simplicity, the properties do not exist in the default theme, we only use transparency to mark disabled fields by default). Namely, you will be interested in disabled and checked-disabled interaction states and properties that are available for styling of these states.

Example: