NewProp Proposal: Add "hide-label" Prop to Toggle Range Component

[mahmoud-ghalayini]

Description

Background
The current implementation of the toggle range component includes a default label element. While this is useful in most cases, there are scenarios where developers might want to omit the label entirely to streamline their UI or adhere to specific design requirements.

Proposal
Introduce a new prop called hideLabel to allow users to toggle the visibility of the label in the toggle range component. This prop would:

• Accept a boolean value (true/false).
• When set to true, the component will not render the label element.
• Maintain all other functionalities (e.g., input handling, styling) of the component.

Use Cases

1. Minimalist Designs: For applications requiring a clean, label-free interface.
2. Custom Labels: When the label is managed externally (e.g., via a parent component or CSS).
3. Accessibility: While the label is hidden visually, ensure ARIA attributes (e.g., aria-labelledby) remain intact for screen readers (if applicable).

Example Usage

<fwb-range hide-label="true" />

Compatibility

• The prop should be backward-compatible with existing implementations.
• Default behavior remains unchanged (label is shown by default).

Why Not Just Use CSS?
While CSS could hide the label, this prop offers a declarative and maintainable solution directly in the component’s API, reducing the need for additional styling hacks.

Extra Suggestions

• A slot to override the whole label and its style?
• In my opinion, all form components shouldn't load any labels unless the user explicitly adds them