<div class="app-form-field">
  @if (label()) {
    <label class="app-form-field__label" [for]="fieldId">
      {{ label() }}
      @if (required()) {
        <span class="app-form-field__required" aria-hidden="true">*</span>
      }
    </label>
  }

  <div class="app-form-field__control">
    <ng-content />
  </div>

  @if (error()) {
    <p class="app-form-field__error" [id]="errorId" role="alert">{{ error() }}</p>
  } @else if (hint()) {
    <p class="app-form-field__hint" [id]="hintId">{{ hint() }}</p>
  }
</div>
