'required=false' on amplifyTextField not being respected

Env:

• Vue3
• @aws-amplify/ui-vue v2.0.0

When adding additional SignIn fields, required="false" is not respected, SignIn form still requires these fields.

Code fragment:

 <authenticator
      initial-state="signIn"
      :login-mechanisms="['email']"
      :sign-up-attributes="['email']"
    >
      <template v-slot:sign-up-fields>
        <amplify-text-field
          id="name"
          label="Full Name"
          name="name"
          placeholder="Full Name"
          required="true"
        />
        <amplify-text-field
          id="title"
          label="Title"
          name="custom:title"
          placeholder="Professional Title"
          required="false"
        />
        <amplify-text-field
          id="credentials"
          label="Credentials"
          name="custom:credentials"
          placeholder="Professional Credentials"
          required="false"
        />
        <authenticator-sign-up-form-fields />
      </template>
</authenticator>

Outcome:

Expected Outcome: Non-required fields should not be required in the UI

[wlee221]

Hello @jeff-wishnie, we’ll close this as per @ErikCH’s comment. Please let us know if problem persists or you have additional questions.

[ErikCH]

Hi @jeff-wishnie !

When you’re passing the required attribute into <amplify-text-field> you’re passing it as text instead of a boolean. So the text always resolves to true. What you need to do is bind false like this :required="false" . Could you try that and see if it fixes your problem?

The base-input component props I’m passing aren’t explicitly set. That’s something I could probably improve in the future. Since they aren’t declared as props they are automatically added to the outermost element in the base-input component. Which is <input>