Theming

Default Theme

Formwix comes with a default theme that you can override either globally or at the field level. Below is the default theme object and what each field represents.

• form: The main form container.
• formContainer: The wrapper for the entire form.
• fieldContainer: The container for a single field.
• fieldWrapper: The wrapper around the field input.
• fieldLabelWrapper: The wrapper around the field label.
• label: The styling for field labels.
• optionsLabel: Labels for options in dropdowns, radio buttons, etc.
• requiredLabel: The required field indicator.
• fieldDescription: Styling for field descriptions.
• fieldError: Styling for error messages.
• text, email, tel, textarea, number, date, time, and url: Specific styles for different input types.
• passwordWrapper: Wrapper for password input fields.
• password: Styling for the password input field.
• passwordEyeButtonWrapper: Wrapper for the password visibility toggle button.
• passwordEyeButton: Styling for the show password button.
• passwordEyeCloseButton: Styling for the hide password button.
• checkBoxWrapper: Wrapper for the checkbox field.
• checkbox: Styling for checkboxes.
• checkBoxLabel: Styling for checkbox labels.
• selectOptionsWrapper: Wrapper for select dropdown options.
• select: Styling for select dropdowns.
• radioWrapper: Wrapper for radio button groups.
• radioOptionsWrapper: Wrapper for multiple radio button options.
• multiSelectWrapper: Wrapper for multi-select dropdowns.
• multiSelect: Styling for multi-select inputs.
• multiSelectOptionsWrapper: Wrapper for multi-select options.
• radio: Styling for individual radio buttons.
• formActionWrapper: Wrapper for form action buttons.
• submitButton: Styling for the submit button.
• formResetButton: Styling for the reset button.

Loading...

Custom Theming

To apply custom styles, pass a theme object to theFormwix component. You can customize individual fields by specifying classes in the theme object.

Loading...

Global Theming

Apply styles globally by passing a theme object to theFormwix component. This will apply the styles to all forms using Formwix.

Field-Level Theming

Override styles for specific fields by including a themeproperty in the field configuration. This is useful when you need certain fields to have unique styles.

Loading...