No form binding and no hint

No form binding but with hint

NgModel

Different controls

• Checkbox can't dynamically switch from/to custom label, therefore both are shown separate below.
• The reference columns are to make sure all controls have the same height and line up correctly.
• Use the following style to align the heights of checkboxes, radio groups and sliders for outline appearance.
  CSS rules may need adjustments if you do not use the default material typography.

            
            .zv-form-field-type-mat-slider .mat-form-field-appearance-outline mat-slider {
            margin: -1em 0;
            width: 100%;
          }
  
          .zv-form-field-type-mat-radio-group .mat-form-field-appearance-outline .mat-mdc-form-field-infix,
          .zv-form-field-type-mat-mdc-checkbox .mat-form-field-appearance-outline .mat-mdc-form-field-infix {
          padding: 0.5em 0;
        }