fix(playground): wrap text/number controls in Field so labels render

[Shreyag02]

Description

Fixes labels not rendering above text and number controls in the docs playground (e.g. the Number Field, Amount, and any other component pages with text/number controls).

Type of Change

• Bug fix (non-breaking change that fixes an issue)

How Has This Been Tested?

Labels match the prop name

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

N/A

Related Issues

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 8, 2026 10:14am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ae01134f-4950-41c2-af3f-aaab95638981

📥 Commits

Reviewing files that changed from the base of the PR and between b29dc15 and 77efd13.

📒 Files selected for processing (1)

• apps/www/src/components/demo/demo-controls.tsx

---

📝 Walkthrough

Walkthrough

The DemoControls component is updated to use the Field component from the apsara design system library. A new import of Field is added, and the rendering logic for text and number controls is refactored to wrap Input components inside Field instead of a plain div. The label is now managed by the Field component rather than passed directly to Input, and styling is split between Field and the styles.noShadow class applied to Input.

Suggested reviewers

• rohanchkrabrty
• paanSinghCoder
• rohilsurana

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: wrapping text/number controls in Field to fix label rendering.
Description check	✅ Passed	The description is directly related to the changeset, explaining the bug fix for labels not rendering in playground controls.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}