[InputField] Fix pointer-events, disable chips when disabled, and standardize CSS naming
Open
@rohanchkrabrty is already working on this.
Since Mar 20, 2026.
component
triage
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
InputField is a custom text input wrapper with rich features (labels, helper text, error states, chips, icons). Has critical accessibility gaps and CSS inconsistencies.
Improvements
5. Fix duplicate pointer-events declarations
Leading and trailing icon styles have contradictory pointer-events: none followed by pointer-events: auto.
6. Disable chips when input is disabled
When the input is disabled, chips remain interactive. They should also be disabled/read-only.
7. Standardize CSS class naming
Mix of camelCase (labelContainer) and kebab-case (input-error-wrapper). Standardize to one convention.
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (#672)
- Accessibility baseline (#673)
Files
packages/raystack/raystack/components/input-field/input-field.tsxpackages/raystack/raystack/components/input-field/input-field.module.css
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.