Advanced topics
CSS Variables

CSS variables

Customize the forms rendered with LetsForm with some CSS variables, for example to reduce the margin between fields

<LetsForm
  className="my_form"
  // ...
/>
.lf-form.my_form {
  --lf-field-margin: 6px;
}

Reference

The list of available CSS variables

VariableDefaultDescription
--lf-field-margin16pxVertical margin between fields
--lf-field-column-margin16pxHorizontal margin in columns
--lf-font-size15pxFont size in plaintext mode
--lf-field-button-margin10pxButtons margin in toolbar and buttons group
--lf-field-margin-top5pxTop margin between actual field and the label
--lf-border-color#e5e5eaGroup border color
--lf-group-padding15pxGroup padding
--lf-group-header15pxGroup header margin
--lf-buttons-margin32pxTop margin of submit and reset buttons