Styling Your Forms in Mirata

Styling Your Forms in Mirata


Welcome to the Style Properties section, located in the right-hand Property Pane panel. Within this section, you gain complete control over the visual presentation of your form. Configure style properties for individual fields (highlighted in blue when selected) or for the entire form when no field is chosen. Let's explore each setting in Style Properties to create polished and visually appealing forms.

General

  1. Margin/Padding: Increase padding from 0 for all sides of the field when ロ is selected. Or, edit padding for each side individually when  is selected. 
  2. Shadows: You can add shadow behind a field by increasing the Focused and/or Unfocused shadow from 0. By default, there’s no shadow. 
  1. Focused: When the form user has selected the field to input. 
  2. Unfocused: When the form user has not selected it / selected some other field. 


Field

  1. Height: By default, 1. Can be set from 0.5 - 2.
  2. Indentation: Right-hand indentation. By default, 1. 
  3. Rounded: When rounded is on, the corners of the field will be rounded. When rounded is off, the corners of the field will be square. By default, rounded is turned off. 
  4. Underline While Disabled/Enabled/Readonly: For different situations, control if the field appears underlined. Adjust when the fields are disabled/enabled/readonly in the Conditions (Σ) tab. 

Field Style

  1. Color:
  1. Container: Entire component container. 
  2. Input: Field’s value. When nothing is selected, it’ll be black.
  3. Background: Behind the input. By default, it will be white.
  1. Font: Adjust the style of the field’s input. Font styles include: Family, Style, Variant, Size, Weight, and Justification.


Label Style

  1. Color: Adjust the color of the label. When nothing is selected, it will be dark gray. 
  2. Font: Adjust the style of the field’s label. Font styles include: Family, Style, Variant, Size, Weight, and Justification.


Border

  1. Color: By default, there’s no border, but add a border by selecting a color here.
  2. Style: Change the Line Type, how Rounded it is, and the Size



Child Style Properties ()
  1. Select a field in the Editing Space that’s one of the Group field types (Section, Expander, or Tabs). 
  2. Adjust all the same Style Properties explained above for all fields that are within the selected Group field. This will apply to fields already in that group and to any fields you later drag inside the group. 
  3. If you select the group field and go to Style Properties (🖌), you’ll be formatting the Group field itself. If you select Child Style Properties (), you’ll be formatting all the fields which are inside of that Group. 

Tip: Instead of picking a Group Field, you can select the background of the form. Now in Child Style Properties, you can change the style for any field you drag onto the form, including Group Fields.