Skip to content

[core] Consider removing the built-in HTML attributes that clash with the component API #984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
vladmoroz opened this issue Dec 6, 2024 · 3 comments · Fixed by #1617
Closed

[core] Consider removing the built-in HTML attributes that clash with the component API #984

vladmoroz opened this issue Dec 6, 2024 · 3 comments · Fixed by #1617
Assignees
@atomiks
Labels
enhancement This is not a bug, nor a new feature

Comments

@vladmoroz
Copy link
Contributor

vladmoroz commented Dec 6, 2024 •
edited
Loading

There's a few incredibly annoying HTML attributes that are present on every HTML element and can lead to confusion about what is the actual API of our components:

  • defaultValue
  • defaultChecked
  • color

It gets confusing because autocomplete is eager to suggest them on components that are supposed to be used with different props, or when they are presented on parts that don't support either:

image image

There might be others, specific to certain tags:

  • The value attribute is inherited from <button> on Checkbox.Root. This clashes with how CheckboxGroup expects the name of the checkbox and not value
  • Number Field input has value, but the value should be set on Root. Is this potentially confusing?
  • etc

As a reference, in Radix Themes I had done this:
https://github.com/search?q=repo%3Aradix-ui%2Fthemes%20removedprops&type=code
https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/components/checkbox.tsx#L22

Search keywords:
@vladmoroz vladmoroz added the enhancement This is not a bug, nor a new feature label Dec 6, 2024
@vladmoroz vladmoroz changed the title [core] Consider removing some built-in HTML attributes [core] Consider removing the built-in HTML attributes that clash with the component API Dec 6, 2024
@colmtuite colmtuite added this to Base UI Dec 9, 2024
@github-project-automation github-project-automation bot moved this to Backlog in Base UI Dec 9, 2024
@colmtuite colmtuite modified the milestone: 1.0.0-alpha.1 release Dec 9, 2024
@atomiks atomiks self-assigned this Mar 31, 2025
@atomiks atomiks mentioned this issue Mar 31, 2025
Merged
@michaldudak
Copy link
Member

Why would you treat just color differently than the other HTML attributes? There are other deprecated attributes like bgcolor, border, etc., that we don't use directly, but as they are a part of HTML, they can be forwarded to the underlying element.

@vladmoroz
Copy link
Contributor Author

Why would you treat just color differently than the other HTML attributes?

Because of all inapplicable/deprecated props, color, defaultValue, defaultChecked are the most common ones that create practical issues when using Base UI components as a foundation for building a design system

bgcolor and border could go too, but I haven't seen them used as props tbh

@atomiks
Copy link
Contributor

atomiks commented Apr 14, 2025

border and bgcolor don't appear in the TS types, that's probably why. I agree color is confusing especially when it's on a component vs. HTML element

@github-project-automation github-project-automation bot moved this from Backlog to Done in Base UI Apr 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@atomiks atomiks

Labels
enhancement This is not a bug, nor a new feature
Projects
Base UI
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[core] Remove clashing props atomiks/base-ui
4 participants
@colmtuite @michaldudak @vladmoroz @atomiks