fix(react-components/text-field): console error - Expected a valid `label` or `labelledby` attribute, received none. If you want to hide the label, provide both `label` and `hide-label` attributes

[malikarami]

Describe the bug

Since the label and hideLabel props are optional, this error should be handled automatically.

[TAPSI][text-field]: Expected a valid `label` or `labelledby` attribute, received none. If you want to hide the label, provide both `label` and `hide-label` attributes.

To Reproduce Steps to reproduce the behavior:

 <TextField
            placeholder="شماره همراه"
            type="tel"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
            hideLabel
            label=""
          />

or

 <TextField
            placeholder="شماره همراه"
            type="tel"
            value={phoneNumber}
            onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
          />

Expected behavior
This error should not be logged to the console.

Screenshots

Screen.Recording.2025-05-31.at.7.12.13.PM.mov

Desktop (please complete the following information):

• OS: [e.g. iOS]: MacOS 14
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 0.17.1

[amir78729]

Thanks for reporting this and sharing your use case!

This log is actually intentional and part of our commitment to making this component library accessibility-first . The <TextField /> component requires either a label (visible or visually hidden) or a valid labelledby attribute to ensure it’s properly accessible to screen readers and assistive technologies.

We understand that it might seem like label and hideLabel are optional—and technically they are—but for accessibility compliance, at least one accessible label must always be present, even if it’s not visibly rendered.

Here’s how to use it correctly:

<TextField
  label="شماره همراه"
  hideLabel
  placeholder="شماره همراه"
  type="tel"
  value={phoneNumber}
  onChange={(e) => setPhoneNumber((e.target as HTMLInputElement).value)}
/>

Or, if you're handling the label via labelledby, ensure that’s provided correctly.

By using our components as intended, your apps will be more inclusive and accessible to all users—thank you for being part of that goal! 💚