Reveal input based on a selection

const [contactMethod, setContactMethod] = useState("");
const [checkboxSelection, setCheckboxSelection] = useState<string[]>([]);

<GoabFormItem
  label="How would you like to be contacted?"
  helpText="Select one option"
>
  <GoabRadioGroup
    name="contactMethod"
    value={contactMethod}
    onChange={(e) => setContactMethod(e.value)}
  >
    <GoabRadioItem
      value="email"
      label="Email"
      reveal={
        <GoabFormItem label="Email address">
          <GoabInput name="email" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabRadioItem
      value="phone"
      label="Phone"
      reveal={
        <GoabFormItem label="Phone number">
          <GoabInput name="phoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabRadioItem
      value="text"
      label="Text message"
      reveal={
        <GoabFormItem label="Mobile phone number">
          <GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
  </GoabRadioGroup>
</GoabFormItem>

<GoabFormItem label="How would you like to be contacted?" mt="xl">
  <GoabCheckboxList
    name="contactMethods"
    value={checkboxSelection}
    onChange={(e) => setCheckboxSelection(e.value || [])}
  >
    <GoabCheckbox
      name="email"
      text="Email"
      value="email"
      reveal={
        <GoabFormItem label="Email address">
          <GoabInput name="email" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabCheckbox
      name="phone"
      text="Phone"
      value="phone"
      reveal={
        <GoabFormItem label="Phone number">
          <GoabInput name="phoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabCheckbox
      name="text"
      text="Text message"
      value="text"
      reveal={
        <GoabFormItem label="Mobile phone number">
          <GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
  </GoabCheckboxList>
</GoabFormItem>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    contactMethod: [""],
    phoneNumber: [""],
    emailAddress: [""],
    emailContactMethod: [false],
    phoneContactMethod: [false],
    textContactMethod: [false],
  });
}

<goab-form-item
  [formGroup]="form"
  label="How would you like to be contacted?"
  helpText="Select one option"
>
  <goab-radio-group name="contactMethod" formControlName="contactMethod">
    <goab-radio-item label="Email" value="email" [reveal]="emailReveal">
      <ng-template #emailReveal>
        <goab-form-item label="Email address">
          <goab-input name="email" formControlName="emailAddress"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
    <goab-radio-item value="phone" label="Phone" [reveal]="phoneReveal">
      <ng-template #phoneReveal>
        <goab-form-item label="Phone number">
          <goab-input name="phone" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
    <goab-radio-item value="text" label="Text message" [reveal]="textReveal">
      <ng-template #textReveal>
        <goab-form-item label="Mobile phone number">
          <goab-input name="mobile" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
  </goab-radio-group>
</goab-form-item>

<goab-form-item [formGroup]="form" label="How would you like to be contacted?" mt="xl">
  <goab-checkbox-list name="contactMethods" formControlName="contactMethods">
    <goab-checkbox name="email" text="Email" value="email" [reveal]="checkEmailReveal">
      <ng-template #checkEmailReveal>
        <goab-form-item label="Email address">
          <goab-input name="email" formControlName="emailAddress"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
    <goab-checkbox name="phone" text="Phone" value="phone" [reveal]="checkPhoneReveal">
      <ng-template #checkPhoneReveal>
        <goab-form-item label="Phone number">
          <goab-input name="phone" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
    <goab-checkbox
      name="text"
      text="Text message"
      value="text"
      [reveal]="checkTextReveal"
    >
      <ng-template #checkTextReveal>
        <goab-form-item label="Mobile phone number">
          <goab-input name="mobile" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
  </goab-checkbox-list>
</goab-form-item>

<goa-form-item
  version="2"
  label="How would you like to be contacted?"
  helptext="Select one option"
>
  <goa-radio-group version="2" name="contactMethod" id="radio-contact">
    <goa-radio-item value="email" label="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="email"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="phone" label="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phone"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="text" label="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobile"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-form-item version="2" label="How would you like to be contacted?" mt="xl">
  <goa-checkbox-list name="contactMethods">
    <goa-checkbox version="2" name="emailContact" text="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="emailInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="phoneContact" text="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phoneInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="textContact" text="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobileInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
  </goa-checkbox-list>
</goa-form-item>