📝 Description

This PR adds the data-required attribute to form field labels when the required prop is set to true. This enhancement provides better accessibility and styling capabilities for required form fields across all Zag form components.

This change was inspired by commit 011741e from Ark UI, ensuring consistency between the two libraries.

⛳️ Current behavior (updates)

Form field labels do not include any indication when a field is required, making it difficult for developers to consistently style required fields and provide proper accessibility indicators.

🚀 New behavior

All form field labels now include the data-required attribute when the required prop is true, providing consistent styling hooks and accessibility improvements across all form components. Only form components that already had a required property defined in their types were modified, ensuring backward compatibility and maintaining the existing API surface.

💣 Is this a breaking change (Yes/No):

No.

📝 Additional Information

This enhancement significantly improves the developer experience by providing a standardized, framework-agnostic way to style required form fields without the need for custom logic or manual attribute management, making it easier to create consistent and accessible user interfaces.

[data-required]::after {
  content: "*";
  color: red;
}